Как связать select и radio на javascript?
Ответ
Пусть есть два radio с надписями “Первый ” и “Второй”. При клике на “Первый” в select должен быть список “Один”, “Два”, “Три”. При клике на “Второй” этот же select должен содержать только “Четыре”, “Пять”.
Исходное состояние:
1 2 3 4 5 6 7 8 9 |
<div class="radio"><label> <input id="radioId1" type="radio" checked="checked" />Первый</label></div> <div class="radio"><label> <input id="radioId2" type="radio" />Второй</label></div> <select class="form-control input-sm" id="selectId"> <option value="1">Один</option> <option value="2">Два</option> <option value="3">Три</option> </select> |
Добавляем обработку выбора radio:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
document.getElementById('radioId1').addEventListener("click", function(){ var sel=document.getElementById('selectId'); sel.options[0].text="Один"; // два значения в списке точно есть sel.options[1].text="Два"; if (sel.options.length==2) { // создаем узел и добавляем как потомка в select var opt=document.createElement("option"); opt.appendChild(document.createTextNode("Три")); opt.setAttribute("value",3); } }); document.getElementById('radioId2').addEventListener("click", function(){ var sel=document.getElementById('selectId'); sel.options.length=2; // удаляем третий, если он есть sel.options[0].text="Четыре"; // два значения в списке точно есть sel.options[1].text="Пять"; }); |