Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.05.2014, 00:47
Аспирант
Отправить личное сообщение для Rorbi Посмотреть профиль Найти все сообщения от Rorbi
 
Регистрация: 28.02.2014
Сообщений: 36

Select и onchange
Всем здравствуйте.
Подскажите пожалуйста. Я написал скрипт для select, что бы при выборе одного из элементов option выводился нужный контент. Но мой контент разбит на множество блоков далеко друг от друга, и вот у меня такой вопрос, как в скрипет задать два id для одного value.

вот то что сделано:
<div class="block10">
						<h3 class="h3_record">Специализация доктора:</h3>
						<div class="kabinet_selectid">	
							<select class="selectid" id="nazn"  name="nazn">
								<option class="sel_dok" selected="selected" value="1">Отоларинголог (лор)</option>
								<option class="sel_dok" value="2">Онкодерматолог, детский онколог</option>
								<option class="sel_dok" value="3">Онкогинеколог, гинеколог</option>
							</select>
						</div>
						<div class="clear"></div>
						<div style="display:block" id="otoloryngolog">
							<p>Отоларинголог</p>
						</div>
						<div style="display:none" id="dermatolog">
							<p>Онкодерматолог, детский онколог</p>
						</div>
						<div style="display:none" id="gynecolog">
							<p>Онкогинеколог, гинеколог</p>
						</div>
					</div>
					<div class="block11">
						<div style="display:block" id="otoloryngolog">
						</div>
						<div style="display:none" id="dermatolog">
						</div>
						<div style="display:none" id="gynecolog">
						</div>
					</div>



<script>
document.getElementById("nazn")
    .onchange = function () {
        var b = {
            1: "otoloryngolog",
            2: "dermatolog",
			3: "gynecolog"
        }, c = this.value,
            a;
        for (a in b) document.getElementById(b[a])
            .style.display = 0 == c || c == a ? "block" : "none"
};
</script>


И вот там где у меня 1: "otoloryngolog", как добавить еще один id сюда, что то у меня не выходит, а с одним id не работает, меняются только верхние блоки
Ответить с цитированием
  #2 (permalink)  
Старый 28.05.2014, 00:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Rorbi,
используйте классы
Ответить с цитированием
  #3 (permalink)  
Старый 28.05.2014, 01:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

Rorbi,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div class="block10">
						<h3 class="h3_record">Специализация доктора:</h3>
						<div class="kabinet_selectclass">
							<select class="selectclass" id="nazn"  name="nazn">
								<option class="sel_dok" selected="selected" value="1">Отоларинголог (лор)</option>
								<option class="sel_dok" value="2">Онкодерматолог, детский онколог</option>
								<option class="sel_dok" value="3">Онкогинеколог, гинеколог</option>
							</select>
						</div>
						<div class="clear"></div>
						<div style="display:block" class="otoloryngolog">
							<p>Отоларинголог</p>
						</div>
						<div style="display:none" class="dermatolog">
							<p>Онкодерматолог, детский онколог</p>
						</div>
						<div style="display:none" class="gynecolog">
							<p>Онкогинеколог, гинеколог</p>
						</div>
					</div>
					<div class="block11">
						<div style="display:block" class="otoloryngolog">
							<p>Отоларинголог</p>
						</div>
						<div style="display:none" class="dermatolog">
							<p>Онкодерматолог, детский онколог</p>
						</div>
						<div style="display:none" class="gynecolog">
							<p>Онкогинеколог, гинеколог</p>
						</div>
					</div>
<script>
	document.getElementById("nazn")
	.onchange = function () {
	  var b = {
	  1: ".otoloryngolog",
	  2: ".dermatolog",
	  3: ".gynecolog"
	  }, c = this.value,
	  a;
	  for (a in b)
	  {var elems = document.querySelectorAll(b[a]);
	    Array.prototype.forEach.call(elems, function(el, i)
	      {
	        el.style.display = c == a? "block": "none"
	      }
	    );
	  }
	};
</script>

</body>

</html>
Ответить с цитированием
  #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>
Ответить с цитированием
  #5 (permalink)  
Старый 28.05.2014, 10:16
Аспирант
Отправить личное сообщение для Rorbi Посмотреть профиль Найти все сообщения от Rorbi
 
Регистрация: 28.02.2014
Сообщений: 36

Спасибо большое, каждый вариант работает. Огромное спасибо, а еще один вопрос можно, а можно привязатся не к value а к alt например у option?
Ответить с цитированием
  #6 (permalink)  
Старый 28.05.2014, 11:41
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Сообщение от Rorbi Посмотреть сообщение
Спасибо большое, каждый вариант работает. Огромное спасибо, а еще один вопрос можно, а можно привязатся не к value а к alt например у option?
Можно, но если возникла такая потребность, то в таком случае лучше привязаться к дата-атрибутам.
Ответить с цитированием
  #7 (permalink)  
Старый 28.05.2014, 12:42
Аспирант
Отправить личное сообщение для Rorbi Посмотреть профиль Найти все сообщения от Rorbi
 
Регистрация: 28.02.2014
Сообщений: 36

Спасибо за информацию
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
событие onchange для select sasha001ua Мобильный JavaScript 0 20.05.2014 19:55
select, checkbox, onchange olnew Элементы интерфейса 4 25.03.2013 22:46
Не работает onchange для select в ie LizzarD Events/DOM/Window 2 22.05.2012 15:39
select + onchange + selected Harosh Элементы интерфейса 2 23.01.2011 04:39
select onChange pingvinchic Events/DOM/Window 7 03.02.2010 16:57