Ссылка на JSFiddle
Сейчас скрипт настроен так, что при выборе в select "показать первый блок", показывается первый. При выборе второго - показывается второй. Когда ты в самом первом select1 снимаешь выборку с какого-нибудь пункта, то соответствующий див скрывается.
В каждом блоке есть свой собственный select. Их value ни на что не влияют.
Мне необходимо, чтобы при снятии выборки не только скрывался ранее показываемый блок, но и очищалось значение select.
Т.е.:
если человек в select1 выбрал "Показать первый блок", ему он показывается. В нём есть select2. Он может в нём выбрать что-нибудь, например "Выбор 1", "Выбор 2" или "Выбор 3". Он выбрал.
Потом он в select1 выбрал "Показать второй блок". Первый скрывается, второй показывается. Нужно, чтобы при этом в первом select сбрасывался на "-- Выбрать —".
Как это сделать?
Ниже следует тот же код, что и по
указанной вверху ссылке (JSFiddle)
<!Выбор основной>
<select id="select1">
<option>-- Выбрать --</option>
<option value="10">Показать первый блок</option>
<option value="20">Показать второй блок</option>
</select>
<!Первый блок>
<div id="block1">
Первый блок<br>
<select id="select2">
<option>-- Выбрать --</option>
<option>Выбор 1</option>
<option>Выбор 2</option>
<option>Выбор 3</option>
</select>
</div>
<!Второй блок>
<div id="block2">
Второй блок<br>
<select id="select3">
<option>-- Выбрать --</option>
<option>Выбор 4</option>
<option>Выбор 5</option>
<option>Выбор 6</option>
</select>
</div>
#block1, #block2 {display: none; margin-top: 50px;}
document.getElementById("select1")
.onchange = function () {
var b = {
10: "block1",
20: "block2",
}, c = this.value,
a;
for (a in b) document.getElementById(b[a])
.style.display = 0 == c || c == a ? "block" : "none"
};
