| |
|
|
| | Приветствую всех и прошу помощи так как джава скрипты не знаю, но есть необходимость в размещении следующего кода на сайте.
Вот код который строит динамический список из 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-ти.
Жду ответа. Буду очень благодарен за подсказку! | |
| |
|
|
| |
|
|
| |
для: Romanych
(08.03.2016 в 01:50)
| | | дописать в nodeList сколько надо еще селектов? | |
| |
|
|
| |
|
|
| |
для: elenaki
(08.03.2016 в 10:30)
| | | Подскажите в какую именно строку. А если можно пример.
Сюда?
nodeList = document.querySelectorAll(".div"+i) ;
|
Что именно? | |
| |
|
|
| |
|
|
| |
для: Romanych
(08.03.2016 в 10:35)
| | |
var divs = document.querySelectorAll(".div1, .div2, .div3, .div4, .div5") ;
|
не проверяла | |
| |
|
|
| |
 2.7 Кб |
|
| |
для: elenaki
(08.03.2016 в 13:49)
| | | Этого не достаточно. Это я уже делал. Проблема в том что если мы прописываем дополнительные дивы, то 4 и 5 блоки (дивы) видны сразу же после загрузки, а они должны быть видны при выборе соответствующего пункта из списка, т.е. при выборе 1 - виден только div1, при выборе 2 - виден только div2 и т.п.
Сам скрипт изначально был создан для варианта со списком из трех пунктов, соответственно и 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, ".div"+i, ".div"+i, ".div"+i, ".div"+i) ;
l = nodeList.length ;
while(l--)
nodeList[l].style.display = "block" ;
} ;
</script>
</body></html>
|
Ааааа... все разобрался сам!! Нужно стили под каждый блок выставить было display: none ;
Спасибо что откликнулись! | |
| |
|
|
