当 "unrelated" html select 元素没有选项 selected 时，如何退出 jQuery 事件？

Question

如果特定 select 元素没有 selected 选项，我想退出复选框的更改 ([un]check) 事件。我测试了 select 元素的值是什么 select 在我的 "ready" 函数开始时用这段代码编辑：

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

警报说 "null" 所以我尝试了这个：

$("#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 元素还没有从中生成 selection 时，我该如何退出事件处理程序？

更新

我尝试了 Horacio Benitez 的建议：

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

...它是 "null"（不是“-1”）

这是将选项添加到单位的代码 select:

<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的"Please choose a Unit"是页面显示时看到的。但是选中 "ckbx_produceusage" 复选框会显示 "null" 然后 "from ckbx_produceusage change event"

当未选择单元 select 中的选项时，如何 exit/return 退出复选框的更改事件？

Answer 1

我们检查未selected选项的方法是给第一个选项一个值=-1和通用文本'Please select an option'强制用户select选项，因此在您的评估中，您可以询问

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/ 您元素的 disabled 属性阻止了 value = -1 的概念，在我发布的 fiddle 中您可以尝试添加 disabled 属性在第一个 option 元素上查看结果。

Answer 2

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

// 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');
});

当 "unrelated" html select 元素没有选项 selected 时，如何退出 jQuery 事件？

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

javascript

jquery

html

html-select

onchange

更新