当“不相关”的 html 选择元素没有选择任何选项时，如何退出 jQuery 事件

How can I exit from a jQuery event when an "unrelated" html select element has had no option selected?

本文关键字：不相关 何退出 退出 事件 jQuery 任何 html 选择 元素 有选择 选项      更新时间：2023-09-26

如果特定的选择元素没有选择选项，我想退出复选框的更改（[un]check）事件。我测试了选择元素的值是什么，在我的"ready"函数开始时没有选择任何代码：

var unitval = $('#unitsselect').val();
alert(unitval);

警报显示"空"，所以我尝试了这个：

$("#ckbx_produceusage").change(function () {
    var unitval = $('#unitsselect').val();
    if (unitval == null) {
        return;
    }
    alert('from ckbx_produceusage change event');
});

但是，这并没有通过告诉我存在IIS问题而导致解决方案的开始 - 它甚至没有向我显示错误页面。但是，一旦我取消了空检查：

$("#ckbx_produceusage").change(function () {
    var unitval = $('#unitsselect').val();
    //if (unitval == null) {
    //    return;
    //}
    alert('from ckbx_produceusage change event');
});

。我在选中有问题的复选框时看到了警报。

那么，当 select 元素尚未从中选择时，如何退出事件处理程序呢？

更新

我尝试了奥拉西奥·贝尼特斯的建议：

$("#ckbx_produceusage").change(function () {
    var unitval = $('#unitsselect').val();
    if (unitval == -1) {
        event.stopPropagation();
        event.preventDefault();
    };
    alert('from ckbx_produceusage change event');
});

。但仍然看到了警报。所以我又加了一个：

$("#ckbx_produceusage").change(function () {
    var unitval = $('#unitsselect').val();
    alert(unitval);
    if (unitval == -1) {
        event.stopPropagation();
        event.preventDefault();
    };
    alert('from ckbx_produceusage change event');
});

。它是"空"（不是"-1"）

这是将选项添加到单位选择的代码：

<select class="form-control, dropdown" id="unitsselect" name="unitsselect">
    <option disabled selected value="-1">Please choose a Unit</option>
    @foreach (var field in units)
    {
        <option id="selItem_@(field.unit)" value="@field.unit">@field.unit</option>
    }
</select>

值为 -1 的"请选择单位"是页面显示时看到的内容。但是选中"ckbx_produceusage"复选框显示"null"，然后是"从ckbx_produceusage更改事件"

当未选择单位选择中的选项时，如何退出/返回复选框的更改事件？

您可以使用变量来跟踪用户是否更改了选择元素。

// If the change event occurs on the select element the user made a selection.
// Set a variable called unitSelectChanged to true if they do.
var unitSelectChanged = false;
$("#unitsselect").change(function(){
    unitSelectChanged = true;
});
$("#ckbx_produceusage").change(function () {
    // Exit from the handler if that variable is true
    if (unitSelectChanged) {
        return;
    }
    alert('from ckbx_produceusage change event');
});

我们检查未选择的选项所做的是给第一个选项一个值=-1，并带有通用文本"请选择一个选项"以强制用户选择一个选项，因此在您的评估中您可以询问 

if($('#unitsselect').val() == "-1" ){
    event.stopPropagation(); //this line prevents the element's event propagation
    event.preventDefault(); // this line prevents the default element behaviour
};

更新

根据您的更新，我为您制作了一个 jfiddle https://jsfiddle.net/o30x9wvx/2/您的元素的禁用属性阻止了值 = -1 的概念，在我发布的小提琴中，您可以尝试在第一个选项元素上添加禁用属性并查看结果。

相关文章：