Простая задачка со списком select
Привет всем. Помогите разобраться кому не лень. Есть список select вида
<select> <option>Пункт 1</option> <option>Пункт 2</option> <option>Пункт 3</option> <option>Пункт 4</option> </select> И есть 4 блока div которые зависят от выбранного пункта списка. <div id="parent_block"> <div id="1" class="contacts"></div> <div id="2" class="contacts"></div> <div id="3" class="contacts"></div> <div id="4" class="contacts"></div> </div> Точнее которые должны зависеть. Например я выбираю "Пункт1" и он становится виден, а остальные скрываются. Выбираю пункт 3 становится виден блок с id="3", а все остальные скрываются. Как правильнее организовать? Такая вот задача. Может у кого в шаблонах есть...Хотелось бы если не готовый код, то хотябы небольшой кусочек что бы я его сам уже доработал. Заранее спасибо. Не судите строго за простецкий вопрос, ибо новичек. Пытаюсь разобраться. |
<select>
<option>Выберите</option>
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
</select>
<div id="parent_block">
<div id="1" class="contacts">1 Block</div>
<div id="2" class="contacts">2 Block</div>
<div id="3" class="contacts">3 Block</div>
<div id="4" class="contacts">4 Block</div>
</div>
<script>
var select = document.querySelector('select');
var blocks = document.querySelectorAll('#parent_block div');
function hideBlocks(except) {
for (var i = 0; i < blocks.length; i++) {
blocks[i].style.display = (i === except) ? '' : 'none';
}
}
select.onchange = function() {
hideBlocks(this.selectedIndex - 1);
};
this.hideBlocks();
</script>
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 21:53. |