Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Простой динамический список (https://javascript.ru/forum/dom-window/37463-prostojj-dinamicheskijj-spisok.html)

vasiliy_shkolniy 20.04.2013 23:00

Простой динамический список
 
Подскажите пожалуйста реализацию для всех браузеров:

<select>
<option>1 вариант</option>
<option>2 вариант</option>
</select>

<div>Блок виден при выборе 1 варианта и "display:none" при выборе второо</div>
<div>Блок не отображается при выборе 1 варианта и появляется при выборе второо</div>


Вариантов 2, а динамических блоков несколько.

Hekumok 21.04.2013 12:08

<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>

vasiliy_shkolniy 21.04.2013 17:09

Hekumok, спасибо. Можно немного по-другому? - чтобы блоки с одним классом показывась при первом варианте, а с другим при втором?. - чтобы можно было сделать много дин. блоков и они не влияли на другие блоки страницы.

Hekumok 21.04.2013 21:57

конечно можно
<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>

ichaos7777 22.06.2013 09:01

Здравствуйте, данное решение не работает в ie8, как бы сделать так, чтобы в этом браузере все работало? спасибо)

SkyLight 22.06.2013 10:44

jQuery или самостоятельно фильтровать элементы по классу.

danik.js 22.06.2013 10:52

Замени getElementsByClassName("div1") на querySelectorAll(".div1")

ichaos7777 22.06.2013 20:45

Заменил, не работает ни в одном браузере

danik.js 23.06.2013 04:10

Ну и зачем врать?
<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>

ichaos7777 23.06.2013 10:34

Спасибо большое, разобрался, вставлял скрипт в head, поэтому не работало, также задумался о том как бы сделать все тоже самое но без select, бывает трудно его стилизовать, видел на сайте rkz.ru как это сделано, но в коде не могу разобраться, как сделать, помогите плиз.


Часовой пояс GMT +3, время: 11:47.