16.06.2016, 12:37
|
|
Аспирант
|
|
Регистрация: 16.06.2016
Сообщений: 32
|
|
|
Связать два и более <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!!!
|
|
16.06.2016, 14:26
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
зависимые селекты и обьект с индексами 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.
|
|
16.06.2016, 15:46
|
|
Аспирант
|
|
Регистрация: 16.06.2016
Сообщений: 32
|
|
рони,
Спасибо, это действительно то, что требовалось на все 100!
Еще такой вопросик, а как можно к коду выше прикрутить изменение картинки?
т.е. Radiobutton 1 = <img src="1">
Radiobutton 2 = <img src="2">
Строчка вывода картинки:
<div><img class="im" src="url" /></div>
Последний раз редактировалось Meattale, 16.06.2016 в 16:01.
|
|
16.06.2016, 15:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Meattale,
ненадо копировать код целиком,
строка 41 добавить
document.querySelector(".im").src = ["1","2"][i];
|
|
16.06.2016, 16:08
|
|
Аспирант
|
|
Регистрация: 16.06.2016
Сообщений: 32
|
|
|
рони,
И снова в точку, спасибо!
|
|
30.06.2016, 07:51
|
|
Аспирант
|
|
Регистрация: 16.06.2016
Сообщений: 32
|
|
|
Здравствуйте!,рони, тема стала вновь актуальной. Подскажите, как доработать скрипт, чтобы было разделение по ид. Как то так.
Сейчас есть две панели селектов и радиобаттанов, но работает только на 1 (ид 001), а на втором просто показывает все, что есть (002).
Можно как то динамически добавить? Потому что будет и 003 и 004 и т.д и т.п.
|
|
30.06.2016, 08:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Meattale,
какие зависимости между селекторами в блоке, одинаковые или разные ? нужен класс для блока. и циклом по блокам.
|
|
30.06.2016, 09:14
|
|
Аспирант
|
|
Регистрация: 16.06.2016
Сообщений: 32
|
|
<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"
|
|
30.06.2016, 09:17
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Meattale,
название класса придумайте
|
|
30.06.2016, 12:18
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
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>
|
|
|
|
