jQuery focus（）事件的无限循环 <select>元件

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>

而这个Javascript与JQuery

$("#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演示

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

---

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

如果Chrome的行为有问题，您可以采取更粗略的方法，从而从DOM中remove() 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演示

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

Answer 2

我认为你需要一个额外的事件来改变内容选择 - 当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;
    }
});

演示