Последнее обновление:
Назначение события для раскрывающегося списка select
Раскрывающийся список относится к html-тегам. Он бывает удобным, когда необходимо выбрать один или несколько пунктов списка и после чего закрыть его, чтобы он не мешался на странице. Как правило, данные, соответствующие пунктам списка, отправляются AJAX-запросом при отправке формы, которая этот список содержит. Однако, в ряде случаев необходимо, например, контролировать значения, выбранные пользователем из состава пунктов списка. или даже отправить их на сервер, не отправляя все остальную форму. Для этого на список необходимо назначить соотвествубщее событие.
Какое?
Вообще-то, в языке javascript на сегодняшний день имеется масса самых разных событий. Однако, именно для обраобтки события выбора пункта раскрывающегося списка, похоже, ничего стандартного (и, главное, кроссбраузерного) не предусмотрено. В интернете встречаются рекомендации назначить, например, событие onchange, возникающее при изменении того или иного пункта списка. Однако, Это не слишком удобно: ведь пользователь может в очередной раз выбрать один и тот же пункт и тогда событие onchange не сработает. Как же быть?
Попробуем обойтись наиболее известными событиями, например, onclick. Это, пожалуй, наиболее употребительное среди всех известных событий в браузере. Однако, назначать его следует не на тег select, а на теги options. Иначе это событие будет срабатывать каждый раз, как только пользователь кликнет по списку, даже еще не выбрав никакой пункт. Что, разумеется, неудобно.
Первый способ
Рассмотрим, как это можно сделать. Вначале - простой способ.
И посмотрим, как это все работает. Вы можете протестировать работу списка, выбирая те или иные его пункты. При клике на сам список ничего происходить не будет, а вот при выборе опций вы будете получать сообщение, содекржащее параметры выбранного пункта (options).
<select size="1">
<option value="1" onclick="handler(this)">x1</option>
<option value="2" selected="selected" onclick="handler(this)">x2</option>
<option value="3" onclick="handler(this)">x3</option>
<option value="4" onclick="handler(this)">x4</option>
<option value="5" onclick="handler(this)">x5</option>
</select>
<script type="text/javascript">
function handler($this) {
alert('value= ' + $this.value + ', text= '+$this.textContent)
}
</script>
Как видим, обработчики корректно срабатывают, все хорошо. Однако, минус в том, что придется писать много кода. Представьте себе, если будет несколько десятков таких списков. Поэтому лучше бы назначать обработчики кликов, условно говоря, в одну строчку и как-то писать покороче. Поэтому используем более красивый способ.
Второй способ
<select size="1">
<option></option>
<option selected="selected"></option>
<option></option>
<option></option>
<option></option>
</select>
<script type="text/javascript">
var options = document.getElementsByTagName('select')[1].getElementsByTagName('option');
Array.prototype.forEach.call(options, function(item, i, arr) {
item.textContent = 'Y'+ item.value + (i+1);
item.value = i+1;
item.onclick = function () {
alert('value= ' + this.value + ', text= '+this.textContent)
}
})
</script>
Как видим, код html существенно упростился, не потребовалось задавать никаких параметров. Все их можно задать при помощи javascript. Протестируйте этот код.
Обработчик во втором случае задается несколько необычным образом, через функцию call. Эта функция "магическим образом" передает параметры, указанные у нее в качестве первого аргументы, на вход цикла forEach. И все бы ничего, да вот только цикл этот споосбен перебирать, разве что, массивы. А тут - коллекция тегов <option>. Это - нечто похожее на массив, что, все-таки, не является таковым. Поэтому вместо массива задается его прототип, т.е. Array.prototype. Как уже говорилось, в этот прототип при помощи функции call будет передана коллекция options. Которая представляет собой перечень тегов option, содержащихся во втором (на данной странице) списке select. Т.е. коллекция передастся в прототип массива и, таким образом, приобретет некоторые свойства массива.
Ну, а функция, которая будет работать с полученным массивом, представлена вторым аргументом функции call. Это - безымянная функция. Он, в частности, и назначает (в цикле) обработчики кликов мыши каждому из тегов <option>.
Что касается конструкции function(item, i, arr) - то это стандартная конструкция цикла forEach в языке javascript. В качестве параметров там фигурируют элемент массива arr по имени item, соответствующий индексу i данного массива. Напомним, что это как раз тот самый массив-прототип, в который была превращена коллекция тегов <option>.
Второй способ хорош еще и тем, что облегчает динамическое задание списков. Например, легко можно изменить число пунктов. равно как и все их параметры.