Показать div по выбору из select

neutron · February 3, 2011

Добрый день.

Пробую сделать такую вещь, но не выходит:

Есть страница:

<html>
<head>
</head>
<body>

<select name='Count'> 
	<option value="1/54">1/54</option>
	<option value="2/54">2/54</option>
	<option value="3/54">3/54</option>
	<option value="4/54">4/54</option>
</select>


<div id="1/54" style="display: none">1/54</div>
<div id="2/54" style="display: none">2/54</div>
<div id="3/54" style="display: none">3/54</div>
<div id="4/54" style="display: none">4/54</div>

</body>
</html>

Подскажите пожалуйста, как сделать так, чтоб при выборе из select значения (например 1/54) мне показывался div с этим id ?

Veseloff · February 3, 2011

В id элемента, насколько я знаю нельзя использовать символ «/», а ещё он должен начинаться с буквы. По теме — ставите селекту событие onchange и делаете так:

document.getElementById(this.value).style.display='block';

neutron · February 3, 2011

<html>
<head>
</head>
<body>

<select name='Count' onchange="document.getElementById(this.value).style.display='block';"> 
	<option>размер</option>
	<option value="a1_54">1/54</option>
	<option value="a2_54">2/54</option>
	<option value="a3_54">3/54</option>
	<option value="a4_54">4/54</option>
</select>


<div id="a1_54" style="display: none">1/54</div>
<div id="a2_54" style="display: none">2/54</div>
<div id="a3_54" style="display: none">3/54</div>
<div id="a4_54" style="display: none">4/54</div>

</body>
</html>

Вот так заработало. Но я не учел что при смене select новый div показывается, но старый не убирается...

Надо функцию писать?

Edited February 3, 2011 by neutron

Great Rash · February 3, 2011

Надо. Оберните все дивы в один контейнер, потом внутри него циклом пробегайтесь по всем дивам и прячьте их, после этого показывайте нужный див. Эта задача настолько тривиальна, что я даже не знаю... наверно это самое первое что люди на яваскрипте делают... ну может кроме alert('hello world');

neutron · February 3, 2011

Надо. Оберните все дивы в один контейнер, потом внутри него циклом пробегайтесь по всем дивам и прячьте их, после этого показывайте нужный див. Эта задача настолько тривиальна, что я даже не знаю... наверно это самое первое что люди на яваскрипте делают... ну может кроме alert('hello world');

Я это и делаю первый раз на яваскрипте)))

Допустим обернул я дивы в контейнер.

<div id="container">
<div id="a1_54" style="display: none">1/54</div>
<div id="a2_54" style="display: none">2/54</div>
<div id="a3_54" style="display: none">3/54</div>
<div id="a4_54" style="display: none">4/54</div>
</div>

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

Great Rash · February 3, 2011

function showElem(contId, id, tag) {
	var container = document.getElementById(cont.id);
	var elems = container.getElementsByTagName(tag);

	for (var i = 0; i < elems.length; i++) {
		elems[i].style.display = 'none';
	}

	document.getElementById(id).style.display = '';
}

<select id="test" name="test" onchange="showElem('container', this.value, 'div')">
	 <option value="a1_54">1/54</option>
	 <option value="a2_54">2/54</option>
	 <option value="a3_54">3/54</option>
	 <option value="a4_54">4/54</option>
</select>

neutron · February 3, 2011

чувствую себя тупым

<html>
<head>
</head>
<body>
<script language="JavaScript" type="text/javascript">  
function showElem(contId, id, tag) {
	var container = document.getElementById(cont.id);
	var elems = container.getElementsByTagName(tag);

	for (var i = 0; i < elems.length; i++) {
		elems[i].style.display = 'none';
	}

	document.getElementById(id).style.display = 'block';
}
</script>

<select id="test" name="test" onchange="showElem('container', this.value, 'div')">
	 <option value="a1_54">1/54</option>
	 <option value="a2_54">2/54</option>
	 <option value="a3_54">3/54</option>
	 <option value="a4_54">4/54</option>
</select>

<div id="container">
<div id="a1_54" style="display: none">1/54</div>
<div id="a2_54" style="display: none">2/54</div>
<div id="a3_54" style="display: none">3/54</div>
<div id="a4_54" style="display: none">4/54</div>
</div>

</body>
</html>

Сделал так, ничего не работает

Great Rash · February 3, 2011

Моя ошибка...

<select id="test" name="test" onchange="showElem('container', this.options[this.selectedIndex].value, 'div')">

acid · February 3, 2011

Вот с помощью jQuery

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>  <!-- НУЖНА JQUERY БИБЛИОТЕКА!! -->
<script type="text/javascript">
<!--
	$(document).ready(function() {

		$('#container div').css('display','none');		   //Скрываем все блоки

		$("#test").change(function(){						 //При смене 
			$('#container div').css('display','none');  //Скрываем все открытые блоки
			id = $('#test option:selected').val();	   //Вытаскиваем value
			$('#'+id).show();								  //Показываем блок c таким же id как наш value
		});

	});
-->
</script>
</head>
<body>

<select id="test" name="test">
	 <option value="a1_54">1/54</option>
	 <option value="a2_54">2/54</option>
	 <option value="a3_54">3/54</option>
	 <option value="a4_54">4/54</option>
</select>

<div id="container">
<div id="a1_54">1/54</div>
<div id="a2_54">2/54</div>
<div id="a3_54">3/54</div>
<div id="a4_54">4/54</div>
</div>

</body>
</html>

Вот как-то так...

neutron · February 4, 2011

Спасибо за помощь, но с JQuery не вариант.

При подключение jQuery что-то конфликтует и нужный функционал сайта не работает.

На простом JS не получилось рализовать, несмотря на помощь Great Rash

Edited February 4, 2011 by neutron

neutron · February 7, 2011

up

klierik · February 7, 2011

http://api.jquery.com/jQuery.noConflict/ поможет с jQuery

rus · February 7, 2011

neutron лови в прикрепленном файле, для себя делал.

решение более-менее универсальное, но громоздкое.

printers.zip

Sign In

Показать div по выбору из select

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information