jQuery选项取消选择事件？

Question

I would like to detect the event where an option is de-selected from a select element. So for instance, if my HTML is:

<select id="select_box">
    <option value="1">Hot</option>
    <option value="2">Cold</option>
    <option value="3">Just Right</option>
</select>

And the second option is selected ( value="2" ), and then the user de-selects it by clicking on another option (such as value="3" ) or clicking the same option again, how do I detect that event using jQuery? My goal is to fire off a function when it happens.

I tried the following:

$("#select_box option:selected").change(function() {
    console.log($(this).val());
});

But it didn't work.

Answer 1

The change event should go on the select element itself:

$("#select_box").change(function() {
    console.log($(this).val());
});

This event fires when the value of the select is changed and will match the behaviour you require.

---

I want the value of the option that was de-selected.

In that case you would need to store the previous value when it's selected, something like this:

$("#select_box").change(function() {
    var $select = $(this),
        currentValue = $select.val(),
        oldValue = $select.data('previous-value');

    // do stuff...

    $select.data('previous-value', currentValue);
});

Answer 2

Well, this is how I would handle this with with a change Event listener.

$("#select_box").on('change', function(e){
    var $t = $(this), data = $t.data('last') || {optText:'none', val:'none'};
    $t.next().text('last was ['+data.optText+'] and its value is "'+data.val+'"').end()
      .data('last', {optText:$t.children('[value="'+$t.val()+'"]').text(), val:$t.val()});
});

Fiddle HERE

Answer 3

当使用one()事件绑定方法选择选项时，我将启用元素

Answer 4

change event will fired only when value is changed which is required by you

        $("#select_box").change(function() {
            console.log(this.value);
        });

Answer 5

You can do it manually some thing like below code i given,

var xSelectedOption = 0;

$("#select_box").change(function() {

    if(xSelectedOption != $(this).val())
    {
      xSelectedOption = $(this).val();

      console.log("Option was changed!");
    }  

});