Тема: style.display
Показать сообщение отдельно
  #5 (permalink)  
Старый 06.02.2014, 01:00
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<style>
      .hide {
        display: none;
      }
      .show {
        display: block;
      }
    </style>
    <select onchange="show(this);">
      <option disabled selected>Категория автомобиля</option>
      <option value="jeep">джип</option>
      <option value="sedan">седан</option>
      <option value="hatchback">хэтчбек</option>
      <option value="bus">автобус</option>
    </select>
      <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>
    <script>
      var actels;
       function show(el) {
        var els = document.querySelectorAll('div.' + el.value),
          len = els.length,
          clsName, thisel, l;
        if (actels) for (l = actels.length; l--;) {
          thisel = actels[l];
          clsName = thisel.className.replace(' show', '');
          thisel.className = clsName;
        }
          actels = els;
          for (; els[--len].className += ' show', len;);
        }
    </script>
Ответить с цитированием