Javascript-форум - Select и onchange

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Select и onchange (https://javascript.ru/forum/dom-window/47545-select-i-onchange.html)

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 не работает, меняются только верхние блоки

Rorbi,
используйте классы

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>

еще один вариант :)

<!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>

Спасибо большое, каждый вариант работает. Огромное спасибо, а еще один вопрос можно, а можно привязатся не к value а к alt например у option?

Цитата:

Сообщение от Rorbi (Сообщение 313774)

Можно, но если возникла такая потребность, то в таком случае лучше привязаться к дата-атрибутам.

Спасибо за информацию