показать слой при выборе в списке
Всем доброй ночи... Я не владею JavaScript у меня всего лишь есть скрипт который отображает определенный слой <div> при выборе в выпадающем списке соответствующего значения. Все работает, но только для одного списка, подскажите пожалуйста как можно "подкрутить" данный скрипт для нескольких выпадающих списков на странице.
<script> function Selected(a) { var label = a.value; if (label==1) { document.getElementById("Label1").style.display='block'; document.getElementById("Label2").style.display='none'; document.getElementById("Label3").style.display='none'; document.getElementById("Label4").style.display='none'; } else if (label==2) { document.getElementById("Label1").style.display='none'; document.getElementById("Label2").style.display='block'; document.getElementById("Label3").style.display='none'; document.getElementById("Label4").style.display='none'; } else if (label==3) { document.getElementById("Label1").style.display='none'; document.getElementById("Label2").style.display='none'; document.getElementById("Label3").style.display='block'; document.getElementById("Label4").style.display='none'; } else if (label==4) { document.getElementById("Label1").style.display='none'; document.getElementById("Label2").style.display='none'; document.getElementById("Label3").style.display='none'; document.getElementById("Label4").style.display='block'; } else { document.getElementById("Label1").style.display='none'; document.getElementById("Label2").style.display='none'; document.getElementById("Label3").style.display='none'; document.getElementById("Label4").style.display='none'; } } </script> <form> <select name="layer" aria-required="true" onChange="Selected(this)"> <option value="0" selected="selected">no layer</option> <option value="1">layer 1</option> <option value="2">layer 2</option> <option value="3">layer 3</option> <option value="4">layer 4</option> </select> <div id='Label1' style='display: none;'><span class="note">layer 1</div> <div id='Label2' style='display: none;'><span class="note">layer 2</div> <div id='Label3' style='display: none;'><span class="note">layer 3</div> <div id='Label4' style='display: none;'><span class="note">layer 4</div> </form> |
zerojava,
<script> function Selected(a, div) { var label = a.value; if (label==1) { document.getElementById(div+"1").style.display='block'; document.getElementById(div+"2").style.display='none'; document.getElementById(div+"3").style.display='none'; document.getElementById(div+"4").style.display='none'; } else if (label==2) { document.getElementById(div+"1").style.display='none'; document.getElementById(div+"2").style.display='block'; document.getElementById(div+"3").style.display='none'; document.getElementById(div+"4").style.display='none'; } else if (label==3) { document.getElementById(div+"1").style.display='none'; document.getElementById(div+"2").style.display='none'; document.getElementById(div+"3").style.display='block'; document.getElementById(div+"4").style.display='none'; } else if (label==4) { document.getElementById(div+"1").style.display='none'; document.getElementById(div+"2").style.display='none'; document.getElementById(div+"3").style.display='none'; document.getElementById(div+"4").style.display='block'; } else { document.getElementById(div+"1").style.display='none'; document.getElementById(div+"2").style.display='none'; document.getElementById(div+"3").style.display='none'; document.getElementById(div+"4").style.display='none'; } } </script> <form> <select name="layer" aria-required="true" onChange="Selected(this, 'Label')"> <option value="0" selected="selected">no layer</option> <option value="1">layer 1</option> <option value="2">layer 2</option> <option value="3">layer 3</option> <option value="4">layer 4</option> </select> <div id='Label1' style='display: none;'><span class="note">layer 1</span></div> <div id='Label2' style='display: none;'><span class="note">layer 2</span></div> <div id='Label3' style='display: none;'><span class="note">layer 3</span></div> <div id='Label4' style='display: none;'><span class="note">layer 4</span></div> <select name="layer2" aria-required="true" onChange="Selected(this, 'div')"> <option value="0" selected="selected">no layer</option> <option value="1">layer 1</option> <option value="2">layer 2</option> <option value="3">layer 3</option> <option value="4">layer 4</option> </select> <div id='div1' style='display: none;'><span class="note">layer 1</span></div> <div id='div2' style='display: none;'><span class="note">layer 2</span></div> <div id='div3' style='display: none;'><span class="note">layer 3</span></div> <div id='div4' style='display: none;'><span class="note">layer 4</span></div> </form> |
<style> .next div { display: none; } .vis { display: block !important } </style> <script> function Selected(sel) { var next = sel.nextSibling.nextSibling; //nextElementSibling; var elems = next.getElementsByClassName('vis');//сделать кроссбраузерной if (elems.length != 0) { elems[0].className = ''; } if (sel.selectedIndex != 0) { next.children[sel.selectedIndex - 1].className = 'vis'; } } </script> <form> <select name="layer" aria-required="true" onChange="Selected(this)"> <option value="0" selected="selected">no layer</option> <option value="1">layer 1</option> <option value="2">layer 2</option> <option value="3">layer 3</option> <option value="4">layer 4</option> </select> <div class="next"> <div id='Label1'><span class="note">layer 1</div> <div id='Label2'><span class="note">layer 2</div> <div id='Label3'><span class="note">layer 3</div> <div id='Label4'><span class="note">layer 4</div> </div> <select name="layer" aria-required="true" onChange="Selected(this)"> <option value="0" selected="selected">no layer</option> <option value="1">layer 1</option> <option value="2">layer 2</option> <option value="3">layer 3</option> <option value="4">layer 4</option> </select> <div class="next"> <div id='Label1'><span class="note">layer 1</div> <div id='Label2'><span class="note">layer 2</div> <div id='Label3'><span class="note">layer 3</div> <div id='Label4'><span class="note">layer 4</div> </div> </form> |
в Вашем слой отображает только второй список, а мне нужно чтобы к примеру для пяти списков был свой набор слоев для каждой позиции в списке
|
zerojava, а что вам мешает добавить/убрать элементы из списков и соответствующие слои из div-ов
|
Спасибо большое, это как раз то что нужно :)
|
Цитата:
|
Подскажите пожалуйста еще... Как сделать чтобы к примеру первый слой всегда отображался по умолчанию. Если в выпадающем списке отсутствует опция "no layer"
|
<style> .next div { display: none; } .vis { display: block !important } </style> <script> function Selected(sel) { var next = sel.nextSibling.nextSibling; //nextElementSibling; var elems = next.getElementsByClassName('vis');//сделать кроссбраузерной if (elems.length != 0) { elems[0].className = ''; } if (sel.options[0].text == 'no layer') { if (sel.selectedIndex != 0) { next.children[sel.selectedIndex - 1].className = 'vis'; } } else { next.children[sel.selectedIndex].className = 'vis'; } } </script> <form> <select name="layer" aria-required="true" onChange="Selected(this)"> <option value="0" selected="selected">no layer</option> <option value="1">layer 1</option> <option value="2">layer 2</option> <option value="3">layer 3</option> <option value="4">layer 4</option> </select> <div class="next"> <div id='Label1'><span class="note">layer 1</div> <div id='Label2'><span class="note">layer 2</div> <div id='Label3'><span class="note">layer 3</div> <div id='Label4'><span class="note">layer 4</div> </div> <select name="layer" aria-required="true" onChange="Selected(this)"> <option value="1">layer 1</option> <option value="2">layer 2</option> <option value="3">layer 3</option> <option value="4">layer 4</option> </select> <div class="next"> <div id='Label1' class="vis"><span class="note">layer 1</div> <div id='Label2'><span class="note">layer 2</div> <div id='Label3'><span class="note">layer 3</div> <div id='Label4'><span class="note">layer 4</div> </div> </form> |
bes еще раз большое Вам спасибо!
|
Часовой пояс GMT +3, время: 05:26. |