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

ВЫЕЗД ИЗ УКРАИНЫ • ОФОРМЛЕНИЕ ДОКУМЕНТОВ • БРОНИРОВАНИЕ • ПОМОЩЬ С ТЦК

УСТРАНЕНИЕ КОНКУРЕНТОВ. БЛОКИРОВКА ДОМЕНОВ, БЛОКИРОВКА ИНСТАГРАМ/ТЕЛЕГРАМ И ДРУГОЕ. ПРОВЕРЕННЫЙ СЕЛЛЕР.

НОВЫЕ ТОРГОВАЯ НОВОСТИ ЧАТ

Скрыть

		ANTICHAT > ПРОГРАММИРОВАНИЕ > PHP
JavaScript Выпадающий список+текстовое поле

Опции темы

Поиск в этой теме

Опции просмотра

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

30.03.2009, 15:26

alpotemkin

Познающий

Регистрация: 07.05.2008

Сообщений: 49

С нами: 9479293

Репутация: 5

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

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

𝕏 Twitter Reddit Telegram Копировать ссылку

30.03.2009, 15:59

VAran

Познающий

Регистрация: 29.05.2008

Сообщений: 53

С нами: 9448648

Репутация: 67

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

Последний раз редактировалось VAran; 30.03.2009 в 16:05..

30.03.2009, 17:13

alpotemkin

Познающий

Регистрация: 07.05.2008

Сообщений: 49

С нами: 9479293

Репутация: 5

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

Код:

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

30.03.2009, 17:24

Pashkela

Динозавр

Регистрация: 10.01.2008

Сообщений: 2,841

С нами: 9649706

Репутация: 3338

Код:

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

30.03.2009, 17:42

KaZ@NoVa

Постоянный

Регистрация: 05.07.2008

Сообщений: 555

С нами: 9394886

Репутация: 1467

Отправить сообщение для KaZ@NoVa с помощью AIM

Отправить сообщение для KaZ@NoVa с помощью Yahoo

пример хайда

Код 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>

30.03.2009, 17:58

alpotemkin

Познающий

Регистрация: 07.05.2008

Сообщений: 49

С нами: 9479293

Репутация: 5

Цитата:

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

пример хайда

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

30.03.2009, 19:53

astrologer

Постоянный

Регистрация: 30.08.2007

Сообщений: 773

С нами: 9840758

Репутация: 808

Цитата:

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

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

30.03.2009, 20:24

alpotemkin

Познающий

Регистрация: 07.05.2008

Сообщений: 49

С нами: 9479293

Репутация: 5

Цитата:

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

Предыдущая тема Следующая тема

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)

Быстрый переход