ANTICHAT — форум по информационной безопасности, OSINT и технологиям
ANTICHAT — русскоязычное сообщество по безопасности, OSINT и программированию.
Форум ранее работал на доменах antichat.ru, antichat.com и antichat.club,
и теперь снова доступен на новом адресе —
forum.antichat.xyz.
Форум восстановлен и продолжает развитие: доступны архивные темы, добавляются новые обсуждения и материалы.
⚠️ Старые аккаунты восстановить невозможно — необходимо зарегистрироваться заново.
 |
JavaScript Выпадающий список+текстовое поле |
30.03.2009, 15:26
|
|
Познающий
Регистрация: 07.05.2008
Сообщений: 49
Провел на форуме:
90698
Репутация:
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')
Только я не совсем понял, как это сделать... Не трудно ли было бы выложить скрипт в полном виде, чтобы я смог разобраться, что и к чему.
Заранее спасибо. |
|
|
30.03.2009, 15:59
|
|
Познающий
Регистрация: 29.05.2008
Сообщений: 53
Провел на форуме:
66389
Репутация:
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
|
|
Познающий
Регистрация: 07.05.2008
Сообщений: 49
Провел на форуме:
90698
Репутация:
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
|
|
Динозавр
Регистрация: 10.01.2008
Сообщений: 2,841
Провел на форуме:
9220514
Репутация:
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
|
|
Постоянный
Регистрация: 05.07.2008
Сообщений: 555
Провел на форуме:
3134311
Репутация:
1467
|
|
пример хайда 
Код 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
|
|
Познающий
Регистрация: 07.05.2008
Сообщений: 49
Провел на форуме:
90698
Репутация:
5
|
|
Сообщение от KaZ@NoVa
пример хайда А чем хайд отличается (лучше) вышеперечисленных скриптов?
|
|
|
|
30.03.2009, 19:53
|
|
Постоянный
Регистрация: 30.08.2007
Сообщений: 773
Провел на форуме:
3069349
Репутация:
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
|
|
Познающий
Регистрация: 07.05.2008
Сообщений: 49
Провел на форуме:
90698
Репутация:
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)
|
|
|
|
Похожие темы
Линейный вид
