选择HTML选择/下拉列表中的项目时会触发什么事件?

时间:2013-07-01 21:59:31

标签: javascript html jquery

我想回应用户选择select元素中的项目。然而这个jQuery:

$('#platypusDropDown').select(function () {
    alert('You selected something');
});

......什么都不做。虽然jsFiddle认为它是有效的jQuery,但它没有显示任何警告。

Click事件有效,但速度太快 - 在进行选择之前点击select元素时会触发。

当然,我真的想做点什么:

$('#platypusDropDown').select(function () {
    var selection = $('platypusDropDown').val;
    $.getJSON('platypus.json', selection, data() {
        // . . .
    });
});

HTML:

<select id="platypusDropDown">
    <option value="duckbill">duckbill</option>
    <option value="duckbillPlatypus">duckbillPlatypus</option>
    <option value="Platypus">Platypus</option>
    <option value="Platypi">Platypi</option>
</select>

1 个答案:

答案 0 :(得分:10)

您需要使用 change 事件

$('#platypusDropDown').change(function () {
    var selection = this.value; //grab the value selected
    $.getJSON('platypus.json', selection, data() {
    . . .
    });
});

<强> Fiddle

Plus $('platypusDropDown').val这里val应该是val()而你不需要在元素上再次创建一个jquery对象,处理程序内的this表示DOM元素(事件所在的选择)绑定到),您可以使用this.value$(this).val()

直接访问该值