Показать сообщение отдельно
  #2 (permalink)  
Старый 16.06.2016, 14:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

зависимые селекты и обьект с индексами option
Meattale,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
window.addEventListener("DOMContentLoaded", function() {
    var inputs = document.querySelectorAll("input.wicartoptional"),
        selects = document.querySelectorAll("select.wicartoptional"),
        ops = selects[1].querySelectorAll("option"),
        obj = {
            0: {
                0: [0],
                1: [0],
                2: [1, 2],
                3: [1, 2]
            },
            1: {
                0: [0],
                1: [2],
                2: [2],
                3: [2]
            }
        },
        op = obj[0];

    function change() {
        var i = selects[0].selectedIndex || 0;
        i = op[i];
        selects[1].options.length = 0;
        i.forEach(function(o) {
            selects[1].appendChild(ops[o])
        })
    }
    selects[0].addEventListener("change", change);
    [].forEach.call(inputs,
        function(input, i) {
            input.checked && (op = obj[i]) && change();
            input.addEventListener("change", function() {
                input.checked && (op = obj[i]);
                change()
            })
        })
});
  </script>
</head>

<body>
 <div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
<input class="wicartoptional" checked="" type="radio" value="1000" name="psbs" data-good-id="002" data-subid="psbswall" data-option-name="Стеновая ПСБС">Стеновая (+1000)<br>
<input class="wicartoptional" type="radio" value="2000" name="psbs" data-good-id="002" data-subid="psbsroof" data-option-name="Кровельная ПСБС">Кровельная (+2000)<br>
</div>
<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
Толщина: <select class="wicartoptional" data-good-id="002"  name="tol">
		<option value="100" data-subid="50" data-option-name="Толщина:50" selected>50 (+100)</option>
		<option value="200" data-subid="75" data-option-name="Толщина:75" >75 (+200)</option>
		<option value="300" data-subid="100" data-option-name="Толщина:100" >100 (+300)</option>
		<option value="300" data-subid="150" data-option-name="Толщина:150" >150 (+300)</option>
</select></div>

<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
Длина: <select class="wicartoptional" data-good-id="002" name="dlin">
		<option value="1000" data-subid="36" data-option-name="Длина:3:6" selected>Первый (+1000)</option>
		<option value="2000" data-subid="34" data-option-name="Длина:3:4">Второй (+2000)</option>
		<option value="3000" data-subid="612" data-option-name="Длина:6:12">Третий (+3000)</option>
</select></div>


</body>
</html>

Последний раз редактировалось рони, 16.06.2016 в 14:29.
Ответить с цитированием