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

演示