Показать сообщение отдельно
  #2 (permalink)  
Старый 31.07.2014, 15:43
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>
    .hide_text {
      display: none;
    }
  </style>
</head>
<body>
<select name="TOURINC" class="TOURINC" autocomplete="off">
  <option value="0">----</option>
  <option value="58">ISTANBUL</option>
  <option value="70">BEIJING</option>
  <option value="69">KHARKIV</option>
  <option value="68">LONDON</option>
  <option value="67">ANTALIA</option>
</select>
 
<br>
<br>
/*в css class="hide_text" по умолчанию скрывает данный DIV*/
<div id="info_tours">
  <div id="58" class="hide_text">ISTANBUL - описание бла, бла, бла...</div>
  <div id="70" class="hide_text">BEIJING- описание бла, бла, бла...</div>
  <div id="69" class="hide_text">KHARKIV- описание бла, бла, бла...</div>
  <div id="68" class="hide_text">LONDON- описание бла, бла, бла...</div>
  <div id="67" class="hide_text">ANTALIA- описание бла, бла, бла...</div>
</div>
</body>
<script>
  
  var sel = document.querySelector('.TOURINC');
  var tours = document.querySelectorAll('#info_tours div');

  sel.addEventListener('change', function(e) {

    for (t in [].slice.call(tours)) {
      if (tours[t].id == e.target.value) {
        tours[t].classList.remove('hide_text');
      } else {
        tours[t].classList.add('hide_text');
      }
    }
  }, false);
</script>
</html>
Ответить с цитированием