Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Select, optionl, и автоматический выбор (https://javascript.ru/forum/dom-window/47579-select-optionl-i-avtomaticheskijj-vybor.html)

Rorbi 29.05.2014 12:47

Select, optionl, и автоматический выбор
 
Всем здравствуйте. У меня есть, допустим, три страницы (1,2,3)с материалом и есть 4 страница общая (about). В этой обще странице есть список (select) со значениями value и id. При выборе option из select у меня меняется контент если быть точным, то два блока с классами. При переходе на странницу 4 (about) из страницы 1 у меня автоматически выбирается option из select, но вот проблема не отображается контент пока пользователь не кликнет по option сам. Подскажите, что мне в скрипте добавить нужно:
<div class="kabinet_selectid">	
							<select class="selectid" id="nazn" required="required" name="nazn">
								<option disabled value="">Выберите специализацию:</option>
								<option class="sel_dok" value="1" id="one1">Первый</option>
								<option class="sel_dok" value="2" id="two1">Второй</option>
								<option class="sel_dok" value="3" id="three1">Третий</option>
							</select>
						</div>
						<div class="clear"></div>
						<div style="display:none" class="one">
							<p>Первый блок</p>						
						</div>
						<div style="display:none" class="too">
							<p>Второй блок</p>
						</div>
						<div style="display:none" class="three">
							<p>Третий блок</p>
						</div>
					<div class="block11">
						<div style="display:none" class="one">
							<p>Первый блок</p>
						</div>
						<div style="display:none" class="too">
							<p>Второй блок</p>
						</div>
						<div style="display:none" class="three">
							<p>Третий блок</p>
						</div>
					</div>

<script type="text/javascript">
window.onload = function () {
    var opt = (window.location.search).replace("?", "");
    var select = document.getElementById("nazn").options;
    for (i=0; i < select.length; i++) {
        if (select[i].id == opt) { break; }
    }
    document.getElementById("nazn").selectedIndex = i;
}
</script>
<script>
	document.getElementById("nazn")
		.onchange = function () {
	      var b = {
		    1: ".one",
            2: ".two",
			3: ".three"
		}, 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>


Повторюсь так то работает то есть например я нажимаю на 1 странице ссылку site/about?one1 у меня переходит на страницу about и сразу выставляет нужный мне select, но не отображает контент. Подскажите пожалуйста, что мне в скрипте добавит.

рони 29.05.2014 14:03

Rorbi,
строка 16 неверно указан класс
<!DOCTYPE HTML>

<html>

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

<body>
<div class="kabinet_selectid">
							<select class="selectid" id="nazn" required="required" name="nazn">
								<option disabled value="">Выберите специализацию:</option>
								<option class="sel_dok" value="1" id="one1">Первый</option>
								<option class="sel_dok" value="2" id="two1">Второй</option>
								<option class="sel_dok" value="3" id="three1">Третий</option>
							</select>
						</div>
						<div class="clear"></div>
						<div style="display:none" class="one">
							<p>Первый блок</p>
						</div>
						<div style="display:none" class="too">
							<p>Второй блок</p>
						</div>
						<div style="display:none" class="three">
							<p>Третий блок</p>
						</div>
					<div class="block11">
						<div style="display:none" class="one">
							<p>Первый блок</p>
						</div>
						<div style="display:none" class="too">
							<p>Второй блок</p>
						</div>
						<div style="display:none" class="three">
							<p>Третий блок</p>
						</div>
					</div>
<script type="text/javascript">
	window.onload = function () {
	  var opt = (window.location.search).replace("?", ""),
	  select = document.getElementById("nazn"),
	  options = select.options;
	  for (var i = 0; i < options.length; i++) {
	    if (options[i].id == opt) {break;}
	  }
	  i = 2 //убрать
	  select.selectedIndex = i;
	  function go() {
	    var b = {
	    1: ".one",
	    2: ".too",
	    3: ".three"
	    }, c = this.value,
	    a;
	    for (a in b)
	    {var elems = document.querySelectorAll(b[a]);
	      Array.prototype.forEach.call(elems, function(el)
	        {
	          el.style.display = c == a? "block": "none"
	        }
	      );
	    }
	  };
	  select.onchange = go;
	  go.call(select)
	}
</script>

</body>

</html>

Rorbi 29.05.2014 15:38

Цитата:

Сообщение от рони (Сообщение 313963)
Rorbi,
строка 16 неверно указан класс

Спасибо огромное. Все работает, еще раз спасибо!


Часовой пояс GMT +3, время: 12:38.