jQuery, лучший способ работы с <select>

Question

Как лучше всего поймать событие

Большое спасибо заранее!

Answer 1

Если вы хотите, чтобы только некоторые выбирали на странице событие события изменения, вы можете добавить к ним класс, например так:

<select class='choose_me'>...</select>

<!-- later on in the page... -->

<select class='choose_me'>...</select>

И затем вы можете поймать событие изменения из любого из них, выполнив что-то вроде:

$('select.choose_me').change(function() { .... } );

Если вы хотите выбрать все из них, вы можете просто изменить свой селектор на

$('select').change(function() { });

Внутри функции вы можете ссылаться на элементы выбора, используя $(this), поэтому код такой:

$('select.choose_me').change(function() {
    alert($(this).val());
});

При изменении уведомит выбранную опцию о любых тегах <select> с классом choose_me.

Answer 2

Для выбора, подобного этому:

<select id="item_select" name="item"> 
    <option>Select an Item</option> 
    <option value="1">Item 1</option> 
    <option value="2">Item 2</option> 
    <option value="3">Item 3</option> 
</select>

вы делаете следующее:

    <script type="text/javascript"> 

    $(document).ready(function(){ 
        $("#item_select").change(function() 
        { 
// do your stuff

        }); 
    }); 
    </script>

Теперь, если вы не хотите использовать идентификатор (хотя у каждого выбора в вашей форме может быть свой индивидуальный идентификатор), вы также можете использовать любой другой селектор CSS, например («выбор формы: первый ребенок»)

Answer 3

В принятых и предложенных ответах отсутствует один важный момент: если пользователь использует клавиатуру (например, клавиши со стрелками или буквы) для перемещения по полю параметров, изменение не будет отслежено.

Вам необходимо добавить еще одно событие, а именно «keydown», и связать его с элементом управления.

Примерно так:

$('select.foo').bind('change keyup',function() {
    // do something amazingly clever like  
    alert($(this).val());
});

Answer 4

Вы можете использовать селектор «выбрать», например так:

$("select").change(function () {

});

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

$(this)