Javascript-форум - Простой динамический список

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 как это сделано, но в коде не могу разобраться, как сделать, помогите плиз.

1baddog1

25.06.2013 11:08

Привет, не силен в java. Подскажите плз, как сделать, чтобы третий вариант нормально работал, не могу разобраться. Помогите плз

<style>
.div2 {
 display: none ;
}
</style>
<style>
.div3 {
 display: none ;
}
</style>
<select onchange="change(this.value);">
<option value=1 selected>1 вариант</option>
<option value=2>2 вариант</option>
<option value=3>3 вариант</option>
</select>
<div class="div1"><input type="checkbox" value="Курс 1" />Курс 1<br /></div>
<div class="div1"><input type="checkbox" value="Курс 2" />Курс 2<br /></div>
<div class="div1"><input type="checkbox" value="Курс 3" />Курс 3<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 1" />нКурс 1<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 2" />нКурс 2<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 3" />нКурс 3<br /></div>
<div class="div3"><input type="checkbox" value="ннКурс 1" />ннКурс 1<br /></div>
<div class="div3"><input type="checkbox" value="ннКурс 2" />ннКурс 2<br /></div>
<script>
var divs = [document.querySelectorAll(".div1"), document.querySelectorAll(".div2"), document.querySelectorAll(".div3")] ;
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" ;
i = 1 - 0 ;
 nodeList = divs[i] ;
 l = nodeList.length ;
 while(l--)
  nodeList[l].style.display = "none" ;
} ;
</script>

в данном случае 1 и 3 вариант отрабатывает нормально. а когда выбираешь 2 то блоки 3 варианта накладываются на 2 вариант

skrudjmakdak

25.06.2013 11:23

а что у вас за выражение:
i = !i - 0; //так не делают. результатом будет булево значение
а потом вы это булево значение запихивайте в массив divs[i];
ктож так делает? в массив должно идти число, причем целое!!

и зачем писать: i = i-1; в самом начале, когда можно в самом option описать value с нуля:

<option value=0 selected>1 вариант</option>
<option value=1>2 вариант</option>
<option value=2>3 вариант</option>

рони	25.06.2013 11:29

1baddog1,
Вариант ...

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<style>
.div2 {
 display: none ;
}
</style>
<style>
.div3 {
 display: none ;
}
</style>
<select onchange="change(this.value);">
<option value=1 selected>1 вариант</option>
<option value=2>2 вариант</option>
<option value=3>3 вариант</option>
</select>
<div class="div1"><input type="checkbox" value="Курс 1" />Курс 1<br /></div>
<div class="div1"><input type="checkbox" value="Курс 2" />Курс 2<br /></div>
<div class="div1"><input type="checkbox" value="Курс 3" />Курс 3<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 1" />нКурс 1<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 2" />нКурс 2<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 3" />нКурс 3<br /></div>
<div class="div3"><input type="checkbox" value="ннКурс 1" />ннКурс 1<br /></div>
<div class="div3"><input type="checkbox"value="ннКурс 2" />ннКурс 2<br /></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>

1baddog1

25.06.2013 11:35

Поставил с нуля. Но при таком варианте тоже не правильно работает. На блоки 1 варианта накладывается блоки 3 варианта.

<script>
var divs = [document.querySelectorAll(".div1"), document.querySelectorAll(".div2"), document.querySelectorAll(".div3")] ;
function change(i) {
 i = i - 0 ;
 var nodeList = divs[i] ;
 var l = nodeList.length ;
 while(l--)
  nodeList[l].style.display = "block" ;
 i = i - 1;
 nodeList = divs[i] ;
 l = nodeList.length ;
 while(l--)
  nodeList[l].style.display = "none" ;
} ;
</script>

1baddog1

25.06.2013 11:37

спасибо! Рони так идеально отрабатывает

1baddog1

26.06.2013 12:24

всё конечно теперь супер работает, ещё раз спасибо.

</style>
<select onchange="change(this.value);">
<option value=1 selected>1 вариант</option>
<option value=2>2 вариант</option>
<option value=3>3 вариант</option>
</select>

Подскажите плз(использую cms modx и eform),
мне надо сделать так

</style>
<select onchange="change(this.value);">
<option value=1 вариант selected>1 вариант</option>
<option value=2 вариант>2 вариант</option>
<option value=3 вариант>3 вариант</option>
</select>

чтобы в репорте отображался текст выбранного варианта. скрипт перестаёт работать, когда меняю значение в value.

рони	26.06.2013 12:56

Цитата:

Сообщение от 1baddog1

остаётся только догадыватся что такое репорт и как он у вас формируется --- могу только предположить. значение value если это не число лучше ставить в кавычки, особенно когда строка содержит пробелы.
<option value="2 вариант">2 вариант</option>
и для получения числа из строки http://javascript.ru/parseFloat
function change(i) { i = parseFloat(i);

1baddog1

26.06.2013 13:02

кусок репорта:

<li><b>отделение:</b> [+otdel+]</li>
<li><b>Ответы вопроса</b> [+newkursy+]</li>

сам скрипт сейчас такой:

<style>
.div2 {
 display: none ;
}
</style>
<style>
.div3 {
 display: none ;
}
</style>
<p><label>Вопрос?</label><br />
<p><label for="otdel">Выберите отделение</label><br />
<select id="otdel" name="otdel" onchange="change(this.value); ">
<option value="1">отделение м</option>
<option value="2">отделение б</option>
<option value="3">отделение в</option>
</select>
<div class="div1"><input type="checkbox" name="newkursy[]" value="Курс 1" />Курс 1<br /></div>
<div class="div1"><input type="checkbox" name="newkursy[]" value="Курс 2" />Курс 2<br /></div>
<div class="div1"><input type="checkbox" name="newkursy[]" value="Курс 3" />Курс 3<br /></div>
<div class="div2"><input type="checkbox" name="newkursy[]" value="нКурс 1" />нКурс 1<br /></div>
<div class="div2"><input type="checkbox" name="newkursy[]" value="нКурс 2" />нКурс 2<br /></div>
<div class="div2"><input type="checkbox" name="newkursy[]" value="нКурс 3" />нКурс 3<br /></div>
<div class="div3"><input type="checkbox" name="newkursy[]" value="ннКурс 1" />ннКурс 1<br /></div>
<div class="div3"><input type="checkbox" name="newkursy[]" value="ннКурс 2" />ннКурс 2<br /></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>

в репорте где [+otdel+] берется значение из value

и при формировании репорта в зависимости от выбранного варианта подставляется 1, 2 или 3

а если value прописать так:

<option value="отделение м">отделение м</option>
<option value="отделение б">отделение б</option>
<option value="отделение в">отделение в</option>

то снизу не появляется select

рони	26.06.2013 13:07

Цитата:

Сообщение от 1baddog1

выбранного варианта подставляется 1, 2 или 3

а что мешает подставить 1 +" вариант" и не менять в селекторе ничего

1baddog1

26.06.2013 13:12

тогда
« MODx Parse Error »

MODx encountered the following error while attempting to parse the requested resource:
« PHP Parse Error »

PHP error debug
Error: Invalid argument supplied for foreach()
Error type/ Nr.: Warning - 2
File: /home/site/html/assets/snippets/eform/eform.inc.php
Line: 851
Line 851 source: foreach ($attributes as $k => $v)

Parser timing
MySQL: 0,0003 s (1 Requests)
PHP: 0,0355 s
Total: 0,0357 s

1baddog1

26.06.2013 14:01

Цитата:

Сообщение от рони (Сообщение 258584)

а что мешает подставить 1 +" вариант" и не менять в селекторе ничего

вначале не понял, что вы имели ввиду
чё то в голову не приходит как подставить, помогите плз

рони	26.06.2013 14:09

1baddog1,
сделайте селектор с кавычками в значении и вытащите цифру в скрипте так будет проще.

1baddog1

26.06.2013 15:41

Цитата:

Сообщение от рони (Сообщение 258596)

1baddog1,
сделайте селектор с кавычками в значении и вытащите цифру в скрипте так будет проще.

в java совсем чайник, с кавычками понятно. Уже голову сломал. Подскажите плиз как от цифр избавится

1baddog1

26.06.2013 15:48

Цитата:

Сообщение от 1baddog1 (Сообщение 258609)

в java совсем чайник, с кавычками понятно. Уже голову сломал. Подскажите плиз как от цифр избавится

цифры заменил текстом, но так не красиво смотрится....)

рони	26.06.2013 16:00

Цитата:

Сообщение от 1baddog1

Подскажите плиз как от цифр избавится

моя твоя непонимать ... код на выходе -- html пусть нерабочий

1baddog1

27.06.2013 12:13

Цитата:

Сообщение от рони (Сообщение 258619)

моя твоя непонимать ... код на выходе -- html пусть нерабочий

Ещё раз спасибо, вывернул мозги и разобрался.

Подскажи, думаю простой вопрос
У меня для текста есть класс стиля (class="nameclass")

я хочу чтобы этот стиль применялся на текст в div-ах.
Понимаю, что нужно правильно добавить тут:

<style>
.div2 {
 display: none ;
}
</style>
<style>
.div3 {
 display: none ;
}
</style>

Прописать class:nameclass; не канает)

Целиком

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<style>
.div2 {
 display: none ;
}
</style>
<style>
.div3 {
 display: none ;
}
</style>
<select onchange="change(this.value);">
<option value=1 selected>1 вариант</option>
<option value=2>2 вариант</option>
<option value=3>3 вариант</option>
</select>
<div class="div1"><input type="checkbox" value="Курс 1" />Курс 1<br /></div>
<div class="div1"><input type="checkbox" value="Курс 2" />Курс 2<br /></div>
<div class="div1"><input type="checkbox" value="Курс 3" />Курс 3<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 1" />нКурс 1<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 2" />нКурс 2<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 3" />нКурс 3<br /></div>
<div class="div3"><input type="checkbox" value="ннКурс 1" />ннКурс 1<br /></div>
<div class="div3"><input type="checkbox"value="ннКурс 2" />ннКурс 2<br /></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>

рони	27.06.2013 12:28

1baddog1,
посмотрите внимательно стили, скрипт и селектор. это для примера.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<style>
.div1,.div2,.div3  {
 display: none ;
  background: #fc0; /* Цвет фона */
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
}

</style>
<select onchange="change(this.value);">
<option value='1 вариант' selected>1 вариант</option>
<option value='2 вариант'>2 вариант</option>
<option value='3 вариант'>3 вариант</option>
</select>
<div class="div1"><input type="checkbox" value="Курс 1" />Курс 1<br /></div>
<div class="div1"><input type="checkbox" value="Курс 2" />Курс 2<br /></div>
<div class="div1"><input type="checkbox" value="Курс 3" />Курс 3<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 1" />нКурс 1<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 2" />нКурс 2<br /></div>
<div class="div2"><input type="checkbox" value="нКурс 3" />нКурс 3<br /></div>
<div class="div3"><input type="checkbox" value="ннКурс 1" />ннКурс 1<br /></div>
<div class="div3"><input type="checkbox"value="ннКурс 2" />ннКурс 2<br /></div>
<script>
var divs = document.querySelectorAll(".div1, .div2, .div3") ;
function change(i) {
 i = parseFloat(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" ;
} ;
change(1)
</script>

</body>

</html>

1baddog1

27.06.2013 12:52

Спасибо!!!! получилось, что я хотел!

1baddog1

04.07.2013 12:19

Цитата:

Сообщение от рони (Сообщение 258619)

моя твоя непонимать ... код на выходе -- html пусть нерабочий

<p><label for="uchilsya" class="blocktitle2">Вопрос?</label></p>
<p><input type="radio" name="oldschool[]" value="Да" eform="Проверка выбора инпутов::1:" onclick="if(this.checked){document.getElementById('nextSibling').style.display='inline-block'}else {document.getElementById('nextSibling').style.display='none';  document.getElementById('nextSibling').value='';}" class="blocktitle2"><label for="uchda" class="blocktitle2">Да</label>
<input type="text" size="33" name="kakiekurse" placeholder="Вопрос при выборе Да" style="display: none;" id="nextSibling">
<br/>
<input type="radio" name="oldschool[]" value="Нет" onclick="if(this.checked) {document.getElementById('nextSibling').style.display='none'; document.getElementById('nextSibling').value='';}"><label for="uchnet" class="blocktitle2">Нет</label><br/></p>

Подскажите пожалуйста, а то уже мозг вывернулся на изнанку)
как сделать проверку заполнения поля:

<input type="text" size="33" name="kakiekurse" placeholder="Вопрос при выборе Да" style="display: none;" id="nextSibling">

danik.js

04.07.2013 12:37

<form action="/">
<input type="text" size="33" name="kakiekurse" placeholder="Вопрос при выборе Да" required="true" />
<button type="submit">Заслать</button>
</form>

1baddog1

04.07.2013 12:55

Цитата:

Сообщение от danik.js (Сообщение 260095)

<form action="/">
<input type="text" size="33" name="kakiekurse" placeholder="Вопрос при выборе Да" required="true" />
<button type="submit">Заслать</button>
</form>

ого так просто, огромное спасибо)) а я уже написал скрипт, который никак не хотел работать. в java скрипте полный чайнег. ещё раз спасибо

1baddog1

04.07.2013 13:01

Цитата:

Сообщение от danik.js (Сообщение 260095)

<form action="/">
<input type="text" size="33" name="kakiekurse" placeholder="Вопрос при выборе Да" required="true" />
<button type="submit">Заслать</button>
</form>

сразу не заметил, но теперь при выборе "нет" - форма не отправляется

1baddog1

04.07.2013 17:11

помогите плззз

рони	04.07.2013 18:21

1baddog1,
:write: конечно лучше сделать отдельную функцию а не пихать в разметку...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
<body><form action="http://">
<p><label for="uchilsya" class="blocktitle2">Вопрос?</label></p>
<p><input type="radio" name="oldschool[]" value="Да" eform="Проверка выбора инпутов::1:" onclick="if(this.checked){document.getElementById('nextSibling').style.display='inline-block';document.getElementById('nextSibling').required='true'}else {document.getElementById('nextSibling').style.display='none';  document.getElementById('nextSibling').value='';}" class="blocktitle2"><label for="uchda" class="blocktitle2">Да</label>
<input type="text" size="33" name="kakiekurse" placeholder="Вопрос при выборе Да" style="display: none;" id="nextSibling" >
<br/>
<input type="radio" checked="checked" name="oldschool[]" value="Нет" onclick="if(this.checked) {document.getElementById('nextSibling').style.display='none'; document.getElementById('nextSibling').value='';document.getElementById('nextSibling').required=''}"><label for="uchnet" class="blocktitle2">Нет</label><br/></p>
<button type="submit">Заслать</button>
</form>
</body>
</html>

1baddog1

05.07.2013 09:10

Большое спасибо

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