PDA

Просмотр полной версии : JavaScript Выпадающий список+текстовое поле

alpotemkin
30.03.2009, 15:26
Доброго времени суток!

Только начал работать с JavaScript'ом и у меня возникли некоторые вопросы.
А вопрос такой: У меня есть список вида

<select id="select">
<option>Первый вариант
<option>Второй вариант
</select>
<input type="text">


Хотелось бы сделать, чтобы при выборе элемента "Второй вариант" появлялось текстовое поле, а при выборе элемента "Первый вариант" это поле не появлялось.

P.S. Где-то вычитал такой вариант:

назначить обработчик события change select'а:document.getElementById

('select').onchange = function() {
...
}


а в нем, в зависимости от выбранного пункта (this.selectedIndex или this.value), изменить свойство display textbox'а (textbox.style.display = 'none' или textbox.style.display = 'inline')

Только я не совсем понял, как это сделать... Не трудно ли было бы выложить скрипт в полном виде, чтобы я смог разобраться, что и к чему.
Заранее спасибо.
VAran
30.03.2009, 15:59
<html>
<head></head>
<body>
<script>
function f1()
{
var s = document.getElementById("select");
var t = document.getElementById("a1");
if(s.selectedIndex)
t.style.display = 'inline';
else
t.style.display = 'none';
}
</script>
<select id="select" onchange = f1()>
<option>Первый вариант</option>
<option>Второй вариант</option>
</select>
<input type="text" style="display:none" id="a1">
</body>
</html>
alpotemkin
30.03.2009, 17:13
Спасибо большое!
Хотел бы уточнить момент, чтобы полностью понять принцип работы: выбор из вариантов делается:
var t = document.getElementById("a1");
А если вариантов много,например 6, то делается:
var a = document.getElementById("select");
var b = document.getElementById("a1");
var c = document.getElementById("a2");
var d = document.getElementById("a3");
var e = document.getElementById("select");
var g = document.getElementById("a4");
И выводится:
<input type="text" style="display:none" id="a1">
<input type="text" style="display:none" id="a2">
<input type="text" style="display:none" id="a3">
<input type="text" style="display:none" id="a4">
или можно через запятую?
<input type="text" style="display:none" id="a1,a2,a3,a4">
Pashkela
30.03.2009, 17:24
<select id="select">
<option value="0"></option>
<option value="1">Первый вариант</option>
<option value="2">Второй вариант</option>
<option value="3">Третий вариант</option>
</select>
<input type="text" style="display:none" id="a1">
<script type="text/javascript">

var selectmenu=document.getElementById("select");
selectmenu.onchange=function() {
var chosenoption=this.options[this.selectedIndex];
var t = document.getElementById("a1");
if (chosenoption.value=="1" || chosenoption.value=="3" )
t.style.display = 'inline';
else
t.style.display = 'none';
}

</script>
KaZ@NoVa
30.03.2009, 17:42
пример хайда ;)
<HTML>
<body>
<script>
function hide_show(val)
{
val =parseInt(val);
switch(val)
{

case 1:
document.getElementById('inp').style.display='none ';
break;
case 2:
document.getElementById('inp').style.display='inli ne';
}



}
</script>
<select id="select" onchange='hide_show(this.value)'>
<option value='1'>hide</option>
<option value='2'>show</option>
</select>
<input id="inp" type="text" style="display:none">
</body>
</HTML>
alpotemkin
30.03.2009, 17:58
пример хайда ;)


А чем хайд отличается (лучше) вышеперечисленных скриптов?
astrologer
30.03.2009, 19:53
А если вариантов много, например 6, то делается массив.

var a = document.getElementById("select");
var b = document.getElementById("a1");
var c = document.getElementById("a2");
var d = document.getElementById("a3");
var e = document.getElementById("select");
var g = document.getElementById("a4");Китайский стиль :)
alpotemkin
30.03.2009, 20:24
массив.

var a = document.getElementById("select");
var b = document.getElementById("a1");
var c = document.getElementById("a2");
var d = document.getElementById("a3");
var e = document.getElementById("select");
var g = document.getElementById("a4");Китайский стиль :)

Возможно. :) Просто я только начал изучать JS, вот пока и путаюсь немного.
За подсказку спасибо. :)