Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Простая задачка со списком select (https://javascript.ru/forum/misc/35187-prostaya-zadachka-so-spiskom-select.html)

Malkis 03.02.2013 01:04

Простая задачка со списком 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", а все остальные скрываются. Как правильнее организовать? Такая вот задача. Может у кого в шаблонах есть...Хотелось бы если не готовый код, то хотябы небольшой кусочек что бы я его сам уже доработал. Заранее спасибо. Не судите строго за простецкий вопрос, ибо новичек. Пытаюсь разобраться.

danik.js 03.02.2013 04:09

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

рони 03.02.2013 09:21

Цитата:

Сообщение от danik.js
this.hideBlocks();

this зачем?

danik.js 03.02.2013 09:24

Цитата:

Сообщение от рони
this зачем?

Откуда я знаю )) Писалось спросонья..


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