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

Poznakomlus,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
      .hide {
        display: none;
      }
      .show {
        display: block;
      }
    </style>
</head>

<body>

    <select onchange="show(this);">
      <option  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>
    function show(el) {
    var els = document.querySelectorAll("div"),
        l = els.length - 1,
        clsName,
        div;
    for (; div = els[l--];) {
        clsName = div.className;
        if (clsName.indexOf(el.value) != -1) clsName = clsName.replace("hide", "show");
        else clsName = clsName.replace("show", "hide");
        div.className = clsName
    }
     };
    </script>

</body>

</html>
Ответить с цитированием