Вопрос по коду Java script (выводит динамический список)
Приветствую всех и прошу помощи так как джава скрипты не знаю, но есть необходимость в размещении следующего кода на сайте.
Вот код который строит динамический список из 3 select ов:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="windows-1251">
</head>
<body>
<style>
.div2 {
display: none ;
}
</style>
<style>
.div3 {
display: none ;
}
</style>
<select onchange="change(this.value);">
<option value=1 selected>Выбирите</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<div class="div1">Ни чего не выбрано</div>
<div class="div2">2</div>
<div class="div3">3</div>
<script>
var divs = document.querySelectorAll(".div1, .div2, .div3") ;
function change(i) {
var nodeList = divs,
l = nodeList.length ;
while(l--)
nodeList[l].style.display = "none" ;
nodeList = document.querySelectorAll(".div"+i) ;
l = nodeList.length ;
while(l--)
nodeList[l].style.display = "block" ;
} ;
</script>
</body>
</html>
Вопрос: Что нужно поменять в коде скрипта, чтоб была возможность корректного вывода более 3-ех селектов? Допустим 5-ти. Жду ответа. Буду очень благодарен за подсказку! |
В вашем коде не три, а один селект ;) Не совсем ясно, что вы стремитесь сделать на вашей странице. Пожалуйста, поясните подробнее.
|
Вложений: 1
Спасибо что откликнулись. Да все верно селект один, я не верно истолковал. Смысл следующий:
Указанный выше код создан для отображения блока соответствующего выбранному в данный момент элементу списка (options). Код взял на данном форуме. Он изначально был создан для варианта со списком из трех пунктов, соответственно и 3-ех дивов. В настоящее время есть необходимость создавать списки из более чем трех элементов, это может быть и 5 и 25-ть, в разных случаях по разному. Сам я не могу разобраться что именно в скрипте отвечает за корректное отображение блоков и что нужно изменять в коде java с увеличением числа пунктов в списке. В прикрепленном файле пример работы скрипта со списком из 5 пунктов и соответственно и 5 блоков. Из него видно что блоки 4,5 видны сразу после загрузки, хотя в списке выбран его первый элемент. Вот код результат работы которого на скриншоте:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="windows-1251">
</head>
<body>
<style>
.div2 {
display: none ;
}
</style>
<style>
.div3 {
display: none ;
}
</style>
<select onchange="change(this.value);">
<option value=1 selected>Выбирите</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
<option value=5>5</option>
</select>
<div class="div1">Ни чего не выбрано</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<script>
var divs = document.querySelectorAll(".div1, .div2, .div3, .div4, .div5") ;
function change(i) {
var nodeList = divs,
l = nodeList.length ;
while(l--)
nodeList[l].style.display = "none" ;
nodeList = document.querySelectorAll(".div"+i) ;
l = nodeList.length ;
while(l--)
nodeList[l].style.display = "block" ;
} ;
</script>
</body>
</html>]
|
Ааааа... все разобрался сам!! Нужно стили под каждый блок выставить было display: none ;
Спасибо что откликнулись! |
Цитата:
|
| Часовой пояс GMT +3, время: 05:07. |