Тема: style.display
Показать сообщение отдельно
  #9 (permalink)  
Старый 06.02.2014, 03:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Poznakomlus,

<style>
      .hide {
        display: none;
      }
      .show {
        display: block;
      }
    </style>
    <select id="brand">
      <option disabled  selected>Категория автомобиля</option>
      <option value="jeep">джип</option>
      <option value="sedan">седан</option>
      <option value="hatchback">хэтчбек</option>
      <option value="bus">автобус</option>
    </select>
    <div id="result">
      <div class="hide jeep">джип</div>
      <DIV class="hide bus">автобус</DIV>
      <DIV class="hide bus">автобус1</DIV>
      <DIV class="hide sedan">седан</DIV>
      <DIV class="hide sedan">седан2</DIV>
      <DIV class="hide hatchback">хэтчбек</DIV>
    </div>
    <script>
      brand.onchange = function () {
        var els = document.querySelectorAll("#result>div"),
          l = els.length,
          clsName, div;
        for (; l--;)
        	div = els[l], clsName = div.className,
        	div.className = clsName.indexOf(this.value) != -1 ? clsName + ' show' : clsName.replace(' show', '');
      };
    </script>
Ответить с цитированием