Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скрыть и показать (https://javascript.ru/forum/jquery/10672-skryt-i-pokazat.html)

exvion 15.07.2010 00:04

Скрыть и показать
 
При выборе значения из select box должен показываться div с id равным выбранному значению.
<div class="columns">
		<div>
			<select id="method">
					<option value="show_one">Show one</option>
					<option value="show_two">Show two</option>
					<option value="show_three">Show three</option>	
				</select>
                </div>
	</div>
<div id="list">
<div id="show_one">
one
</div>
<div id="show_two">
two
</div>
<div id="show_three">
three
</div>
</div>


Первая мысль написать так:
if $("#method").value=="show_one"
{
$("#show_one").show();
$("#show_two").hide();
$("#show_three").hide();
}

if $("#method").value=="show_two"
{
$("#show_one").hide();
$("#show_two").show();
$("#show_three").hide();
}

if $("#method").value=="show_three"
{
$("#show_one").hide();
$("#show_two").hide();
$("#show_three").show();
}


Однако, если значений около 10, то написание уже занимает много времени.
Как переписать выше приведенный код в более короткий и который бы не зависел от количества значений в selectbox?

Псевдо-jquery код
$("list < #"+$("#method").selected.value").show();
$("list not "#"+$("#method").selected.value").hide();

exec 15.07.2010 00:12

$('#method').change(function () {
	$('#list div').hide();
	$('#' + this.value).show();
});

exvion 15.07.2010 01:13

exec, спасибо. Который раз удивляюсь возможностям jquery.


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