Javascript-форум - Связать два и более <select>

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Связать два и более <select> (https://javascript.ru/forum/xhtml-html-css/63583-svyazat-dva-i-bolee-select.html)

Связать два и более <select>

Доброго времени!
Не могу понять, как выполнить слияние двух <select>

<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>

Нужно, чтобы при выборе radiobutton Стеновая в 1 <select> было 50,75,100,150
НО
во втором при выборе 50 и 75 было только 3:6
и при выборе 100 и 150 было только 3:4 и 6:12
===========
RADIOBUTTON 2 Кровельная
<select> 1 50.75.100.150
<select> 2 при значении первого 50 = 6, 75 = 6:12, 100= 6:12 150 = 6:12
HElP!!!

зависимые селекты и обьект с индексами 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>

рони,

Спасибо, это действительно то, что требовалось на все 100!
Еще такой вопросик, а как можно к коду выше прикрутить изменение картинки?
т.е. Radiobutton 1 = <img src="1">
Radiobutton 2 = <img src="2">
Строчка вывода картинки:

<div><img class="im" src="url" /></div>

Meattale,
ненадо копировать код целиком,
строка 41 добавить

document.querySelector(".im").src = ["1","2"][i];

рони,
И снова в точку, спасибо!

Здравствуйте!,рони, тема стала вновь актуальной. Подскажите, как доработать скрипт, чтобы было разделение по ид. Как то так.
Сейчас есть две панели селектов и радиобаттанов, но работает только на 1 (ид 001), а на втором просто показывает все, что есть (002).
Можно как то динамически добавить? Потому что будет и 003 и 004 и т.д и т.п.

Meattale,
какие зависимости между селекторами в блоке, одинаковые или разные ? нужен класс для блока. и циклом по блокам.

<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 200px;">
<input class="wicartoptional" checked="" type="radio" value="1000" name="psbs2" data-good-id="002" data-subid="psbswall2" data-option-name="Стеновая ПСБС">Стеновая (+1000)<br>
<input class="wicartoptional" type="radio" value="2000" name="psbs2" data-good-id="002" data-subid="psbsroof2" data-option-name="Кровельная ПСБС">Кровельная (+2000)<br>
</div>
<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 200px;">
Толщина: <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: 200px;">
Длина: <select class="wicartoptional" data-good-id="002" name="dlin">
        <option value="1000" data-subid="36" data-option-name="Длина:3:6" selected>3:6 (+1000)</option>
        <option value="2000" data-subid="34" data-option-name="Длина:3:4">3:4 (+2000)</option>
        <option value="3000" data-subid="612" data-option-name="Длина:6:12">6:12 (+3000)</option>
</select></div>

Одинаковые, меняется только data-good-id="002"

Meattale,
название класса придумайте

Meattale,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call( document.querySelectorAll('.sel'), function(el) {
    var inputs = el.querySelectorAll("input.wicartoptional"),
        selects = el.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) {
            if(input.checked) {op = obj[i];
            el.querySelector(".im").src = ["http://javascript.ru/forum/images/smilies/dance3.gif","http://javascript.ru/forum/images/smilies/victory.gif"][i]; change();
            }
            input.addEventListener("change", function() {
                el.querySelector(".im").src = ["http://javascript.ru/forum/images/smilies/dance3.gif","http://javascript.ru/forum/images/smilies/victory.gif"][i];
                input.checked && (op = obj[i]);
                change()
            })

        })

    });
});
  </script>
</head>

<body>  <div class="sel">
 <img class="im" src="url" />
 <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>
</div>
<div class="sel">
   <img class="im" src="url" />
 <div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 300px;">
<input class="wicartoptional" checked="" type="radio" value="1000" name="psbs2" data-good-id="002" data-subid="psbswall" data-option-name="Стеновая ПСБС">Стеновая (+1000)<br>
<input class="wicartoptional" type="radio" value="2000" name="psbs2" 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>
</div>
</body>
</html>

рони,Здравствуйте! Да, это снова то что нужно, но подскажите такой момент. У меня картинка находится в другой ячейке таблицы (выше по коду) и она никак не может попадать в .sel. Как можно перенести картинку выше, но чтобы она менялась так же как и сейчас по radio

Meattale,
укажите нужный селектор в строке 44, я могу только гадать. или нужна структура минимальная html.

рони,

<html>
<head></head>
<body>
<div id="catalog">
			<div class="wrapper">
				<h3 class="scroll fadeInOut">Виды и типы сэндвич панелей</h3>


				<table border="0" cellpadding="0" cellspacing="0"  width="100%">
	<tbody>
		<tr>
			<td colspan="2" style="height:45px;">
				<p align="center"><a title="сэндвич панели c наполнением из пенополистирола ПСБС (EPS)" href="/upload/catalog/penoplL.gif" rel="lightgallery">													
<img border="0" src="/upload/catalog/catalog2.png" width="260" height="180" class="p20 im"></a></p>
				<p class="zoom">Нажмите на картинку для увеличения</p>
			</td>
			<td rowspan="2" style="height:45px;">
				<h2 class="title"><b>Описание</b></h2>
						
                     
			</td>
		</tr>
		<tr>
			<td style="height:45px;">
				<p class="take">Со склада:</p><br><center>Цена: <span class="wicartprice" id="wicartprice_001">100</span> Руб. (Базовая цена 100 Руб.)</center>
<div class="sel">
 <img class="im" src="url" />
<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 200px;">
<input class="wicartoptional" checked="" type="radio" value="1000" name="psbs" data-good-id="001" data-subid="psbswall" data-option-name="Стеновая ПСБС">Стеновая (+1000)<br>
<input class="wicartoptional" type="radio" value="2000" name="psbs" data-good-id="001" data-subid="psbsroof" data-option-name="Кровельная ПСБС">Кровельная (+2000)<br>
</div>
<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 200px;">
Толщина: <select class="wicartoptional" data-good-id="001"  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: 200px;">
Длина: <select class="wicartoptional" data-good-id="001" name="dlin">
        <option value="1000" data-subid="36" data-option-name="Длина:3:6" selected>3:6 (+1000)</option>
        <option value="2000" data-subid="34" data-option-name="Длина:3:4">3:4 (+2000)</option>
        <option value="3000" data-subid="612" data-option-name="Длина:6:12">6:12 (+3000)</option>
</select></div>
	

	<div style="margin-left: 5.8%;">Кол-во: <input type="text" class="wicartnum" id="winum_001" value="1" data-min-value="1" data-max-value="100" /></div>
<br><br>
	

<button  id="wicartbutton_002" class="button" onclick="cart.addToCart(this, '001', priceList['001'])" style="margin-left: 22%;">Купить</button></p>
			</td>

			<!--Товар [001]-->
			<td style="height:45px;">
				<p class="take">Под заказ:</p><br><center>Цена: <span class="wicartprice" id="wicartprice_002">200</span> Руб. (Базовая цена 200 Руб.)</center>

<div style="background: #F0F0F0; margin: 5px; border-radius: 5px; padding: 10px; width: 200px;">
<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: 200px;">
Толщина: <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: 200px;">
Длина: <select class="wicartoptional" data-good-id="002" name="dlin">
        <option value="1000" data-subid="36" data-option-name="Длина:3:6" selected>3:6 (+1000)</option>
        <option value="2000" data-subid="34" data-option-name="Длина:3:4">3:4 (+2000)</option>
        <option value="3000" data-subid="612" data-option-name="Длина:6:12">6:12 (+3000)</option>
</select></div>
	

	<div style="margin-left: 5.8%;">Кол-во: <input type="text" class="wicartnum" id="winum_002" value="1" data-min-value="1" data-max-value="100" /></div>
<br><br>
	

<button id="wicartbutton_002" class="button" onclick="cart.addToCart(this, '002', priceList['002'])" style="margin-left: 22%;">Заказать</button></p>
			</td>

		</tr>	
</tbody>
</table>
</div>
</div>

</body>
</html>

26 строчку нужно сделать на месте 13-15

Meattale,
строка 41 заменить
el.querySelector(".im").src =
на
document.querySelector(".im").src =

рони,
Здравствуйте!
Первый момент:
Подскажите пожалуйста, в чем проблема?

когда так:

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

Картинка, которая не зависит от выбора radio - есть,

а когда так:

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

то

<img class="im" src="undefined">

Второй момент:
Каким образом можно изменить список? Изменились данные:

Стена со склада:

Т50: 3м, 6м

Т75: 3м, 6м

Т100: 3м, 4м, 6м, 9м, 12м

Т150: 6м, 12м

Стена под заказ:

Т50: от 2м до 12м

Т75: от 2м до 12м

Т100: от 2м до 12м

Т125: от 2м до 12м

Т150: от 2м до 12м

Т175: от 2м до 12м

Т200: от 2м до 12м

Кровельная со склада:

Т50: 6м

Т75: 6м, 12м

Т100: 6м, 12м

Т150: 6м, 12м

Кровельная под заказ:

Т50: от 2м до 12м

Т75: от 2м до 12м

Т100: от 2м до 12м

Т125: от 2м до 12м

Т150: от 2м до 12м

Т175: от 2м до 12м

Т200: от 2м до 12м

Если нужно как то разбить,то интересный момент. Товаров всего 014. Четные - заказ. Нечетные - со склада

Третий момент:
Дело в том, что у меня таких вот колонок,как на скрине вниз идет 14 штук (как каталог) и на каждой разная картинка. Как это можно реализовать, чтобы не копировать скрипт 14 раз с разными классами?

Meattale,
я пас ... анализируйте предоставленные варианты ...

рони,
Подскажите, можно сделать чтобы по классу,например .s менялись и селекты и картинки (как сейчас)
а по классу .z отключалась выборка селектов (Были видны все опции), а менялась только картинка?

Meattale,
я не могу вам помочь в данном случае

рони,
Но как же:(
Подскажите, как удалить выборку селектов из данного скрипта и сделать просто смену картинки по радиобатану, как щас класс .im, а просто смену картинки без выборки селектов по классу .imgz (отдельный скрипт)