Question

我有这个HTML：

<select id="select-one">
    <option value="">Choose</option>
    <option value="1">House</option>
</select>

<select id="select-two">
    <option value="">Choose</option>
    <option value="A">Table</option>
</select>

这个带JQuery的Javascript

$("#select-two").focus( function() {

    if( $("#select-one").val() == "" ) {
        alert("Fill select-one first!");
        return false;
    }

});

所以我得到了一个带有警报的无限循环，因为在调用alert()之后，Javascript将焦点再次放在同一个select（select-two）中。

有人可以帮我解决这个问题吗？

Answer 1

注意：根据您的评论，这假设您必须听取焦点事件。

解决方案1 - 使用blur() - 在Chrome中有效但有缺陷

理论上，focus事件无法取消，因此return false或event.preventDefault()在这种情况下无效。但是，实际上，您可以使用blur()方法撤消事件。

例如：

$('#select-two').on('focus',function () {
    if ($("#select-one").val() == "") {
        $(this).blur();
        alert('Fill select-one first!');
        return false;
    }
});

参见 jsFiddle demo

这有效地防止了字段在alert调用后重新获得焦点，因此focus事件不会重复。唯一的问题是，在Chrome中，即使该字段不再聚焦，下拉列表仍然保持打开状态（参见演示）。

解决方案2 - 使用remove()和clone() - 代价高昂但跨浏览器

如果Chrome的行为有问题，您可以采取更粗略的方法，即remove()来自DOM的select，clone()然后将其重新插入DOM。这将有效地“重置”select元素，使其无焦点和关闭。

例如：

$(document).on('focus','#select-two',function (e) {
    if ($("#select-one").val() == "") {
        $(this).remove().clone().insertAfter('#select-one');
        alert('Fill select-one first!');
        return false;
    }
});

参见 jsFiddle demo

这种方法的优点在于它在Chrome中运行良好。这种方法的缺点是它涉及操纵DOM以解决一个非常微不足道的问题。

Answer 2

我认为你需要一个额外的事件来改变内容select-two，当select-one的值有这样的“”时：

<强> HTML

<select id="select-one">
    <option value="">Choose</option>
    <option value="1">House</option>
</select>

<select id="select-two">
    <option value="">Choose</option>
    <option value="A">Table</option>
</select>

<强> JS

$("#select-one").change(function() {
    if ($(this).val() == "") {
        $("#select-two").val("");
    }
});

$("#select-two").focus(function() {
    if( $("#select-one option:selected").val() == "" ) {
        alert("Fill select-one first!");
        $("#select-one").focus();
        return false;
    }
});

Demo

带有<select>元素</select>的jQuery focus（）事件的无限循环

2 个答案: