Javascript.RU

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

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, но не отображает контент. Подскажите пожалуйста, что мне в скрипте добавит.
Ответить с цитированием
  #2 (permalink)  
Старый 29.05.2014, 14:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,931

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>
Ответить с цитированием
  #3 (permalink)  
Старый 29.05.2014, 15:38
Аспирант
Отправить личное сообщение для Rorbi Посмотреть профиль Найти все сообщения от Rorbi
 
Регистрация: 28.02.2014
Сообщений: 30

Сообщение от рони Посмотреть сообщение
Rorbi,
строка 16 неверно указан класс
Спасибо огромное. Все работает, еще раз спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Имитировать выбор в списке select cha0s jQuery 1 27.03.2014 18:43
сэмулировать выбор первого элемента select evgeniy123 jQuery 2 05.02.2014 01:37
выбор в select Александр141 Элементы интерфейса 4 03.11.2012 12:53
Выбор всех Select kvaleksandr Элементы интерфейса 12 27.10.2012 20:55
select + выбор с отображением сразу it_tech Элементы интерфейса 3 26.06.2012 19:52