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

[alpotemkin]

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

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

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

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

Если где-то уже рассматривался этот вопрос - не ругайтесь, плиз, а киньте ссылку на тему.

[x-yuri]

назначаешь обработчик события change select'а:

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

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

кроме того, можешь почитать статьи (например, про события, DOM), книги

[alpotemkin]

А не трудно будет привести пример в полном виде? Просто мне проще разобраться в работе скрипта, имея перед глазами полный вариант.

P.S. Статьи почитал, спасибо. А книгу я и так читаю, только нужный мне момент не очень освещен.

[AzriMan]

примерно так. смешан работающий код и написанный только что для этого примера.

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

[alpotemkin]

Спасибо за ответ! Но мне кажется, что так будет короче и намного проще:

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

[AzriMan]

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

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

1. вы просили пример. вы его получили.

2. "краткость и простота" - весьма спорный вопрос.

2.1. краткость. если я уберу лишний код, сделаю короче имена переменных и ID, уберу св-во visibility, то код по "краткости" будет аналогичным.

2.2 простота. а чем он проще? в данном случае привязка к тому, что нужный вам элемент второй по счету, св-во selectedIndex будет ==1, что ==true, и ваше условие выполнится. а если у вас список с 10ю элементами? вы будете каждый помнить по индексу? ок. вы запоминаете и сравниваете их по индексу. а что, если вам нужно будет переставить несколько элементов, или добавить что-либо в начало списка? "О, Боже",- скажете вы.. - "весь порядок сбился..." и будет необходимо вспомнить, а в каком месте, в каком условии, какой selectedIndex соответствует какому элементу списка..

3. у меня просьба. а поясните, для каких целей вот эта запись?

var s = document.getElementById("select");

я нисколько не претендую на правильность, но в приведенном в примере коде, в вызов функции параметром передается объект this. для чего, спросите вы? а вот ответ на этот вопрос останется автору темы домашним заданием.

[alpotemkin]

Насчет десятка вариантов - вы правы, действительно будет сложно разобраться. просто для начинающего мне действительно проще написать указанный мною скрипт.

var s = document.getElementById("select");

Чтобы обозначить, что этот вариант идет без дополнительной функции... Хотя может я и неправ и эта запись действительно лишняя.

в приведенном в примере коде, в вызов функции параметром передается объект this. для чего, спросите вы? а вот ответ на этот вопрос останется автору темы домашним заданием.

Я так понимаю, что "this" - это ключевое слово элемента HTML, которое в данный момент обрабатывает событие...Т.е., прописав функцию doSomething, можно значительно сократить и упростить код скрипта.
Если неверно - поправьте пожалуйста.

[x-yuri]

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)

Чтобы обозначить, что этот вариант идет без дополнительной функции... Хотя может я и неправ и эта запись действительно лишняя.

не понял. Если обработчик назначается в html (onclick="..."), то в нем (внутри двойных кавычек) можно использовать this - он будет указывать на данный элемент. Но если из него вызвать функцию, то в ней this будет указывать на другой объект. Поэтому AzriMan передает this явно, в качестве параметра и необходимости в var s = document.getElementById("select"); в результате нету. Но если обработчик назначается так:

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

т.е. с помощью javascript, а не средствами html, то this опять же указывает на select

Я так понимаю, что "this" - это ключевое слово элемента HTML, которое в данный момент обрабатывает событие...Т.е., прописав функцию doSomething, можно значительно сократить и упростить код скрипта.

нет, this - ключевое слово javascript

[alpotemkin]

Ага, примерно все понял... Постараюсь запомнить. Всем спасибо за объяснения.

[AzriMan]

AzriMan, я тоже считаю, что название переменной (как для локальной переменной функции) очень уж длинное

да, я знаю. мне было лень придумывать какое-нибудь осмысленное название локальной переменной, поэтому я тупо копипастнул название из значения ID
а назначать осмысленные имена локальным (и не только) переменным.. наверно моя привычка.. что бы, если будет необходимость, вернуться к написанному мною коду через месяц/два я мог вспомнить, а что означает вот этот `var a;` и вот этот `var xxx;`
для минимизации кода всегда можно воспользоваться различными минификаторами/обфускаторами..

с другой стороны, alpotemkin, проверка if(s.selectedIndex) очень слабо объясняет происходящее имхо. Лучше уж if(s.selectedIndex == 1)

согласен. по правде говоря, я не сразу сообразил, чего именно хотел добиться alpotemkin этим сравнением но, в итоге, догадался.

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

да, совершенно верно! )