Выпадающий список+текстовое поле
Доброго времени суток!
Только начал работать с JavaScript'ом и у меня возникли некоторые вопросы. А вопрос такой: У меня есть список вида
<select id="select">
<option>Первый вариант
<option>Второй вариант
</select>
<input type="text">
Хотелось бы сделать, чтобы при выборе элемента "Второй вариант" появлялось текстовое поле, а при выборе элемента "Первый вариант" это поле не появлялось. Если где-то уже рассматривался этот вопрос - не ругайтесь, плиз, а киньте ссылку на тему. |
назначаешь обработчик события change select'а:
document.getElementById('select').onchange = function() {
...
}
а в нем в зависимости от выбранного пункта (this.selectedIndex или this.value) изменяешь свойство display textbox'а (textbox.style.display = 'none' или textbox.style.display = 'inline') кроме того, можешь почитать статьи (например, про события, DOM), книги |
А не трудно будет привести пример в полном виде? Просто мне проще разобраться в работе скрипта, имея перед глазами полный вариант.
P.S. Статьи почитал, спасибо. А книгу я и так читаю, только нужный мне момент не очень освещен. |
примерно так. смешан работающий код и написанный только что для этого примера.
function MYFUNCT(obj)
{
if (obj.value=="ZZZ") {
statExportDateStart_input = document.getElementById("statExportDateStart_input");
statExportDateStart_input.style.visibility = "visible";
statExportDateStart_input.style.display = "block";
}
}
... <tr>
<td><p>Кто:</td>
<td><select name="stat_target" class="formStatExport_select" onchange="MYFUNCT(this);">
<option value="non_selected" selected="selected">Выберите объект</option>
<option value="ААА">ААА</option>
...
<option value="ZZZ">ZZZ</option>
</select></td>
</tr>
...
<input style="visibility: hidden; display: none;" class="formStatExport_input" type="text" id="statExportDateStart_input">
|
Спасибо за ответ! Но мне кажется, что так будет короче и намного проще:
<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">
|
Цитата:
"Хотелось бы сделать, чтобы при выборе элемента "Второй вариант" появлялось текстовое поле, а при выборе элемента "Первый вариант" это поле не появлялось." 1. вы просили пример. вы его получили. 2. "краткость и простота" - весьма спорный вопрос. 2.1. краткость. если я уберу лишний код, сделаю короче имена переменных и ID, уберу св-во visibility, то код по "краткости" будет аналогичным. 2.2 простота. а чем он проще? в данном случае привязка к тому, что нужный вам элемент второй по счету, св-во selectedIndex будет ==1, что ==true, и ваше условие выполнится. а если у вас список с 10ю элементами? вы будете каждый помнить по индексу? ок. вы запоминаете и сравниваете их по индексу. а что, если вам нужно будет переставить несколько элементов, или добавить что-либо в начало списка? "О, Боже",- скажете вы.. - "весь порядок сбился..." и будет необходимо вспомнить, а в каком месте, в каком условии, какой selectedIndex соответствует какому элементу списка.. 3. у меня просьба. а поясните, для каких целей вот эта запись?
var s = document.getElementById("select");
я нисколько не претендую на правильность, но в приведенном в примере коде, в вызов функции параметром передается объект this. для чего, спросите вы? а вот ответ на этот вопрос останется автору темы домашним заданием. |
Насчет десятка вариантов - вы правы, действительно будет сложно разобраться. просто для начинающего мне действительно проще написать указанный мною скрипт. :)
Цитата:
Цитата:
Если неверно - поправьте пожалуйста. :) |
AzriMan, я тоже считаю, что название переменной (как для локальной переменной функции) очень уж длинное и непонятно зачем одновременно используется и visibility и display.
Хотя согласен, что проверять какой пункт выбран лучше по value. Кроме того, alpotemkin, наверняка не знает, что когда ничего не выбрано selectedIndex == -1 (http://www.w3.org/TR/1998/REC-DOM-Le...ml#ID-85676760) с другой стороны, alpotemkin, проверка if(s.selectedIndex) очень слабо объясняет происходящее имхо. Лучше уж if(s.selectedIndex == 1) Цитата:
document.getElementById('select').onchange = function() {
...
}
т.е. с помощью javascript, а не средствами html, то this опять же указывает на select Я так понимаю, что "this" - это ключевое слово элемента HTML, которое в данный момент обрабатывает событие...Т.е., прописав функцию doSomething, можно значительно сократить и упростить код скрипта. нет, this - ключевое слово javascript |
Ага, примерно все понял... Постараюсь запомнить. :) Всем спасибо за объяснения. :)
|
Цитата:
а назначать осмысленные имена локальным (и не только) переменным.. наверно моя привычка.. что бы, если будет необходимость, вернуться к написанному мною коду через месяц/два я мог вспомнить, а что означает вот этот `var a;` и вот этот `var xxx;` для минимизации кода всегда можно воспользоваться различными минификаторами/обфускаторами.. Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 08:23. |