I have this 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>

And this Javascript with JQuery

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

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

});

So i am getting a infinite loop with alerts because after call alert() Javascript puts the focus again in the same select (select-two).

Someone can help me to solve this please?

I have this 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>

And this Javascript with JQuery

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

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

});

So i am getting a infinite loop with alerts because after call alert() Javascript puts the focus again in the same select (select-two).

Someone can help me to solve this please?

• javascript
• focus
• jquery
• onfocus

• 5 Listen to change event instead of focus. – Ram Commented Feb 22, 2013 at 23:36
• @undefined, I need to use .focus() of some logical rules in my code – Marcio Mazzucato Commented Feb 22, 2013 at 23:44
• @Boaz, I have to use .focus() in my specific code – Marcio Mazzucato Commented Feb 22, 2013 at 23:44
• 3 Rather than using an alert, perhaps some error text above or next to the select box so you aren't changing focus? – Wing Lian Commented Feb 22, 2013 at 23:45
• @WingLian, Nice tip! If i don't get a better solution, i will do this. Please put your ment as an answer! – Marcio Mazzucato Commented Feb 22, 2013 at 23:48

2 Answers 2

Note: based on your ments, this assumes you must listen to the focus event.

Solution 1 - using blur() - effective but buggy in Chrome

In theory, the focus event is not cancelable, so return false or event.preventDefault() will have no effect in this case. However, in practice, you can reverse the event by using the blur() method.

For example:

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

See jsFiddle demo

This effectively prevents the field from regaining focus after the alert call and so the focus event is not repeated. The only problem is that in Chrome even though the field is not focused anymore, the dropdown remains open (see demo).

Solution 2 - using remove() and clone() - costly but cross-browser

If Chrome's behavior is problematic, you can take a more crude approach, whereby you remove() the select from the DOM, clone() it and then reinsert it into the DOM. This will effectively "reset" the select element pletely, leaving it without focus as well as closed.

For example:

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

See jsFiddle demo

The upside of this approach is that it works well in Chrome too. The downside of this approach is that it involves manipulating the DOM for a very trivial issue.

I think you need an extra event that change content select-two when the value of select-one has "" like this:

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