jQuery 选项取消选择事件

jQuery Option De-Select Event?

本文关键字：事件 选择 取消 选项 jQuery      更新时间：2023-09-26

我想检测从选择元素中取消选择选项的事件。 例如，如果我的 HTML 是：

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

并且选择了第二个选项(value="2"(，然后用户通过单击另一个选项(例如value="3"(或再次单击同一选项来取消选择它，如何使用jQuery检测该事件？ 我的目标是在函数发生时触发它。

我尝试了以下方法：

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

但它没有用。

change 事件应该在 select 元素本身上进行：

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

当选择的值发生更改时，将触发此事件，并将与所需的行为匹配。

我想要取消选择的选项的值。

在这种情况下，您需要在选择时存储以前的值，如下所示：

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

好吧，这就是我使用更改事件侦听器处理此问题的方式。

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

在这里摆弄

我会在使用one()事件绑定方法选择选项时启用该元素

更改事件仅在您需要更改值时触发

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

你可以手动完成一些事情，就像我给出的下面的代码一样，

var xSelectedOption = 0;
$("#select_box").change(function() {
    if(xSelectedOption != $(this).val())
    {
      xSelectedOption = $(this).val();
      console.log("Option was changed!");
    }  
});
相关文章：