jquery select change event get selected选项

I bound an event on the change event of my select elements with this:

我将select元素的更改事件绑定到以下内容:

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

});

How can I access the element which got selected when the change event occurs?

当发生更改事件时，如何访问被选中的元素?

6 个解决方案

#1

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

#2

You can use the jQuery find method

您可以使用jQuery查找方法

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

The above solution works perfectly but I choose to add the following code for them willing to get the clicked option. It allows you get the selected option even when this select value has not changed. (Tested with Mozilla only)

上面的解决方案工作得很好，但是我选择为他们添加以下代码，以便获得单击选项。它允许您获取所选选项，即使选择值没有更改。(仅测试了Mozilla)

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

#3

Delegated Alternative

In case anyone is using the delegated approach for their listener, use e.target (it will refer to the select element).

如果有人正在为他们的听众使用委托方法，请使用e。目标(它将引用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 Demo

JSFiddle演示

#4

I find this shorter and cleaner. Besides, you can iterate through selected items if there are more than one;

我发现这个又矮又干净。此外，如果选择的项目不止一个，可以迭代;

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

#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();
});

First create a select option. After that using jquery you can get current selected value when user change select option value.

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

#6

Another and short way to get value of selected value,

另一种获取价值的捷径，

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});