Форум АНТИЧАТ - JavaScript Выпадающий список+текстовое поле

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)

- - JavaScript Выпадающий список+текстовое поле (https://forum.antichat.xyz/showthread.php?t=113734)

JavaScript Выпадающий список+текстовое поле

Доброго времени суток!

Только начал работать с 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')

Только я не совсем понял, как это сделать... Не трудно ли было бы выложить скрипт в полном виде, чтобы я смог разобраться, что и к чему.
Заранее спасибо.

<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>

Спасибо большое!
Хотел бы уточнить момент, чтобы полностью понять принцип работы: выбор из вариантов делается:

Код:

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">

Код:

<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>

пример хайда ;)

Код HTML:

<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='inline';

}







}

</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>

Цитата:

Сообщение от KaZ@NoVa

пример хайда ;)

А чем хайд отличается (лучше) вышеперечисленных скриптов?

Цитата:

А если вариантов много, например 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");

Китайский стиль :)

Цитата:

Сообщение от astrologer

массив.

Код:

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, вот пока и путаюсь немного.
За подсказку спасибо. :)