Тема: Select и onchange
Показать сообщение отдельно
  #4 (permalink)  
Старый 28.05.2014, 02:14
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

еще один вариант
<!DOCTYPE HTML>
<html>
  <head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style>
      div[data-doctor] {
        display: none;
      }
      div[data-doctor].show {
        display: block;
      }
    </style>
  </head>
  
  <body>
    <div class="block10">
      <h3 class="h3_record">Специализация доктора:</h3>
      <div class="kabinet_selectclass">
        <select class="selectclass" id="nazn" name="nazn">
          <option selected="selected" value="1">Отоларинголог (лор)</option>
          <option value="2">Онкодерматолог, детский онколог</option>
          <option value="3">Онкогинеколог, гинеколог</option>
        </select>
      </div>
      <div class="clear"></div>
      <div data-doctor="1" class="show">
        <p>Отоларинголог</p>
      </div>
      <div data-doctor="2">
        <p>Онкодерматолог, детский онколог</p>
      </div>
      <div data-doctor="3">
        <p>Онкогинеколог, гинеколог</p>
      </div>
    </div>
    <div class="block11">
      <div data-doctor="1" class="show">
        <p>Отоларинголог</p>
      </div>
      <div data-doctor="2">
        <p>Онкодерматолог, детский онколог</p>
      </div>
      <div data-doctor="3">
        <p>Онкогинеколог, гинеколог</p>
      </div>
    </div>
    <script>
      var elems = document.querySelectorAll("div[data-doctor]");
      document.getElementById("nazn").onchange = function () {
        var val = this.value;
        for (var el, i = 0; i < elems.length; i++) {
          el = elems[i];
          el.className = el.getAttribute('data-doctor') == val ? "show" : "";
        }
      };
    </script>
  </body>
</html>
Ответить с цитированием