jquery选择更改事件获取选定选项

Question

我用我的选择元素的更改事件绑定了一个事件:

$('select').on('change', '', function (e) {

});

如何在更改事件发生时访问已选择的元素？

Answer 1

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

Answer 2

您可以使用jQuery find方法

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

上面的解决方案完美无缺,但我选择为他们添加以下代码,以便获得点击选项.即使此选择值未更改,它也允许您获取所选选项.(仅使用Mozilla测试)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });

Answer 3

委托替代方案

如果有人使用委托方法作为他们的监听器,请使用e.target(它将引用select元素).

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

JSFiddle演示

Answer 4

我发现这更短更干净.此外,如果有多个项目,您可以遍历所选项目;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

Answer 5

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

首先创建一个select option。之后，jquery您可以在用户更改select option值时获得当前选定的值。

Answer 6

$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});