|
Простой динамический список
Подскажите пожалуйста реализацию для всех браузеров:
<select> <option>1 вариант</option> <option>2 вариант</option> </select> <div>Блок виден при выборе 1 варианта и "display:none" при выборе второо</div> <div>Блок не отображается при выборе 1 варианта и появляется при выборе второо</div> Вариантов 2, а динамических блоков несколько. |
<style> div { display: none ; } </style> <select onchange="change(this.value);"> <option value=1 selected>1 вариант</option> <option value=2>2 вариант</option> </select> <div>Блок виден при выборе 1 варианта и "display:none" при выборе второо</div> <div>Блок не отображается при выборе 1 варианта и появляется при выборе второо</div> <script> var divs = document.getElementsByTagName("div") ; function change(i) { i = i-1 ; divs[i].style.display = "block" ; i = !i - 0 ; divs[i].style.display = "none" ; } ; change(1) ; </script> |
Hekumok, спасибо. Можно немного по-другому? - чтобы блоки с одним классом показывась при первом варианте, а с другим при втором?. - чтобы можно было сделать много дин. блоков и они не влияли на другие блоки страницы.
|
конечно можно
<style> .div2 { display: none ; } </style> <select onchange="change(this.value);"> <option value=1 selected>1 вариант</option> <option value=2>2 вариант</option> </select> <div class="div1">Блок виден при выборе 1 варианта и "display:none" при выборе второо</div> <div class="div2">Блок не отображается при выборе 1 варианта и появляется при выборе второо</div> <div class="div1">Блок виден при выборе 1 варианта и "display:none" при выборе второо</div> <div class="div2">Блок не отображается при выборе 1 варианта и появляется при выборе второо</div> <div class="div1">Блок виден при выборе 1 варианта и "display:none" при выборе второо</div> <div class="div2">Блок не отображается при выборе 1 варианта и появляется при выборе второо</div> <script> var divs = [document.getElementsByClassName("div1"), document.getElementsByClassName("div2")] ; function change(i) { i = i-1 ; var nodeList = divs[i] ; var l = nodeList.length ; while(l--) nodeList[l].style.display = "block" ; i = !i - 0 ; nodeList = divs[i] ; l = nodeList.length ; while(l--) nodeList[l].style.display = "none" ; } ; </script> |
Здравствуйте, данное решение не работает в ie8, как бы сделать так, чтобы в этом браузере все работало? спасибо)
|
jQuery или самостоятельно фильтровать элементы по классу.
|
Замени getElementsByClassName("div1") на querySelectorAll(".div1")
|
Заменил, не работает ни в одном браузере
|
Ну и зачем врать?
<style> .div2 { display: none ; } </style> <select onchange="change(this.value);"> <option value=1 selected>1 вариант</option> <option value=2>2 вариант</option> </select> <div class="div1">Блок виден при выборе 1 варианта и "display:none" при выборе второо</div> <div class="div2">Блок не отображается при выборе 1 варианта и появляется при выборе второо</div> <div class="div1">Блок виден при выборе 1 варианта и "display:none" при выборе второо</div> <div class="div2">Блок не отображается при выборе 1 варианта и появляется при выборе второо</div> <div class="div1">Блок виден при выборе 1 варианта и "display:none" при выборе второо</div> <div class="div2">Блок не отображается при выборе 1 варианта и появляется при выборе второо</div> <script> var divs = [document.querySelectorAll(".div1"), document.querySelectorAll(".div2")] ; function change(i) { i = i-1 ; var nodeList = divs[i] ; var l = nodeList.length ; while(l--) nodeList[l].style.display = "block" ; i = !i - 0 ; nodeList = divs[i] ; l = nodeList.length ; while(l--) nodeList[l].style.display = "none" ; } ; </script> |
Спасибо большое, разобрался, вставлял скрипт в head, поэтому не работало, также задумался о том как бы сделать все тоже самое но без select, бывает трудно его стилизовать, видел на сайте rkz.ru как это сделано, но в коде не могу разобраться, как сделать, помогите плиз.
|
Часовой пояс GMT +3, время: 11:47. |
|