Last active
January 26, 2019 07:05
-
-
Save VencaV/47ee43b242a2bb6e822f9d6de738137a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <p> | |
| <script | |
| src="https://code.jquery.com/jquery-3.3.1.min.js" | |
| integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" | |
| crossorigin="anonymous"></script> | |
| <script type="text/javascript"> | |
| variants = [ | |
| { | |
| "code": "c1", | |
| "Barva": "Červená", | |
| "Velikost": "S", | |
| "Material": "Bavlna" | |
| }, | |
| { | |
| "code": "c2", | |
| "Barva": "Červená", | |
| "Velikost": "M", | |
| "Material": "Bavlna" | |
| }, | |
| { | |
| "code": "c3", | |
| "Barva": "Červená", | |
| "Velikost": "M", | |
| "Material": "Azbest" | |
| }, | |
| { | |
| "code": "c4", | |
| "Barva": "Modrá", | |
| "Velikost": "L", | |
| "Material": "Azbest" | |
| }, | |
| { | |
| "code": "c5", | |
| "Barva": "Modrá", | |
| "Velikost": "M", | |
| "Material": "Bavlna" | |
| } | |
| ]; | |
| params = ["Barva","Velikost","Material"]; | |
| document.addEventListener("DOMContentLoaded", function() { | |
| params.forEach(function(select) { | |
| document.getElementById(select).addEventListener('change', function() { | |
| var displayMessage = false; | |
| params.forEach(function(param) { | |
| displayMessage = colorize($('#' + param), true); | |
| }); | |
| if (displayMessage) { | |
| $('#unavailableCombination').show(); | |
| } else { | |
| $('#unavailableCombination').hide(); | |
| } | |
| }); | |
| }); | |
| }); | |
| function colorize(select) { | |
| var qqq = []; | |
| $(select).find('option').each(function() { | |
| if ($(this).val() !== 'zvolte') { | |
| qqq.push($(this)); | |
| } | |
| }); | |
| if (qqq.length) { | |
| var $unavailableOptgroup = $(select).find('.unavailable-variants'); | |
| if (!$unavailableOptgroup.length) { | |
| $('<optgroup class="unavailable-variants" label="Dostupné v jiné kombinaci parametrů" />').appendTo($(select)); | |
| } | |
| for (var i = 0; i < qqq.length; i++) { | |
| qqq[i].appendTo($unavailableOptgroup); | |
| } | |
| } | |
| curParam = $(select).attr('id'); | |
| selected = {}; | |
| params.forEach(function(element) { | |
| if (element == curParam) { | |
| return; | |
| } | |
| val = $("#"+element).val(); | |
| selected[element] = (val == 'zvolte' ? null : val); | |
| }); | |
| available = {}; | |
| variants.forEach(function(variant) { | |
| matches = true; | |
| for (var param in selected) { | |
| if (selected[param] == null || variant[param] == selected[param] ) { | |
| continue; | |
| } | |
| matches = false; | |
| break; | |
| } | |
| if (matches) { | |
| available[variant[curParam]] = true; | |
| } | |
| }); | |
| console.log(available); | |
| console.log(params); | |
| for (var param in available) { | |
| $unavailableOptgroup.find('option[name='+param+']').insertBefore($unavailableOptgroup); | |
| } | |
| if (!$unavailableOptgroup.find('option').length) { | |
| $unavailableOptgroup.remove(); | |
| } | |
| return $unavailableOptgroup.find('option:selected').length; | |
| } | |
| </script> | |
| </p> | |
| <form id="main" method="post"> | |
| <pre style="display: none; background-color: #272822; color: #e6db74; font-size: 12px; font-family: consolas, monospace; padding: 1em;"><code>[ | |
| { | |
| "code": "c1", | |
| "Barva": "Červená", | |
| "Velikost": "S", | |
| "Material": "Bavlna" | |
| }, | |
| { | |
| "code": "c2", | |
| "Barva": "Červená", | |
| "Velikost": "M", | |
| "Material": "Bavlna" | |
| }, | |
| { | |
| "code": "c3", | |
| "Barva": "Červená", | |
| "Velikost": "M", | |
| "Material": "Azbest" | |
| }, | |
| { | |
| "code": "c4", | |
| "Barva": "Modrá", | |
| "Velikost": "L", | |
| "Material": "Azbest" | |
| }, | |
| { | |
| "code": "c5", | |
| "Barva": "Modrá", | |
| "Velikost": "M", | |
| "Material": "Bavlna" | |
| } | |
| ] | |
| </code></pre> | |
| <h2>Výběr variant</h2> | |
| <p>Barva<br /><select id="Barva" onfocus="colorize(this)" style="display: block; min-width: 280px;"> | |
| <option name="zvolte">zvolte</option> | |
| <option name="Červená">Červená</option> | |
| <option name="Modrá">Modrá</option> | |
| <optgroup class="unavailable-variants" label="Dostupné v jiné kombinaci parametrů"></optgroup> | |
| </select><br />Velikost<br /><select id="Velikost" onfocus="colorize(this)" style="display: block; min-width: 280px;"> | |
| <option name="zvolte">zvolte</option> | |
| <option name="S">S</option> | |
| <option name="M">M</option> | |
| <option name="L">L</option> | |
| <optgroup class="unavailable-variants" label="Dostupné v jiné kombinaci parametrů"></optgroup> | |
| </select><br />Materiál<br /><select id="Material" onfocus="colorize(this)" style="display: block; min-width: 280px;"> | |
| <option name="zvolte">zvolte</option> | |
| <option name="Bavlna">Bavlna</option> | |
| <option name="Azbest">Azbest</option> | |
| </optgroup> | |
| <optgroup class="unavailable-variants" label="Dostupné v jiné kombinaci parametrů"></optgroup> | |
| </select></p> | |
| <p id="unavailableCombination" style="display: none; color: darkred;" aria-hidden="true">Zvolená kombinace parametrů není dostupná, zkuste změnit parametry.</p> | |
| </form> | |
| <h3>Dostupné varianty</h3> | |
| <ul> | |
| <li>Červená, S, Bavlna</li> | |
| <li>Červená, M, Bavlna</li> | |
| <li>Červená, M, Azbest</li> | |
| <li>Modrá, L, Azbest</li> | |
| <li>Modrá, M, Bavlna</li> | |
| </ul> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment