focusing on an element after an event is fired

Question

I want to display an alert message if the user does not select any item in the dropdown then focus that dropdown. I want to do this in all dropdowns with the class "select".

$("#submit").click(function(event) {    
    if (!$(".select").val()) {
        alert("please select one");
        event.preventDefault();
    $(".select").focus();
    }
});

Now, this works fine for one dropdown, but when there are multiple dropdowns, it focuses on the very last, not the particular dropdown.For example, consider an html page with three dropdowns.

<select class="select" id="usertype">
<option value="">Select one</option>
<option value="guest">Guest</option>
<option value="admin">Admin</option>
</select>

<select class="select" id="gender">
<option value="">Select one</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>

<select class="select" id="languages">
<option value="">Select one</option>
<option value="c++">c++</option>
<option value="c">c</option>
</select>

If I selected some items in both languages and gender but select nothing from usertype ("Select one"'s value is ""), the alert message is displayed, but the focus goes to languages, instead of usertype.

What should I do to focus on the unselect dropdown (or the first unselected if the user did not choose items from many dropdowns)?

Answer 1

How about this:

$("#submit").click(function(event) {    
    if (!$(".select").val()) {
        alert("please select one");
        event.preventDefault();
        $(".select[selectedIndex=0]").focus();
    }
});

Answer 2

You can do it with $.each ,

$("#submit").click(function(event) {
    $(".select").each(function(){
        if (!$(this).val()) {
          alert("please select one");
          event.preventDefault();
          $(this).focus();
          return false;
        }
    });
});

Answer 3

Given the updated HTML, and in the face of some rampant unexplained down-voting, I'd suggest the following:

// binding the anonymous function of the 'click'
// method as the event-handler for clicks on the
// element with the id of 'submit':
$("#submit").click(function (event) {

    // caching all the elements with the class of
    // 'select':
    var selects = $('.select'),

    // filtering those cached elements elements,
    // retaining only those for whom the assessment
    // provided to filter()'s anonymous function
    // returns a value of true, or is 'truthy':
        hasNoValue = selects.filter(function () {

            // here we're checking that the current
            // select has a value of '' (empty string):
            return this.value === '' && 

            // and that its currently selected <option>
            // (this.options is a collection of the
            // <option> elements within the current
            // <select> element, and this.selectedIndex
            // is the index of the selected <option>
            // in the options collection) has the
            // text of 'Select one'
            // (String.prototype.trim() removes leading
            // and trailing white-space from a supplied
            // string):
            this.options[this.selectedIndex].text.trim() === 'Select one'
        });

    // if the hasNoValue collection of <select> elements has a length
    // other than (the 'falsey') 0, then we enter the 'if':
    if (hasNoValue.length) {

        // preventing the default action of the click event:
        event.preventDefault();

        // selecting the first element from the collection
        // held within hasNoValue, and focusing that one:
        hasNoValue.eq(0).focus();
    }
});

 $("#submit").click(function(event) { var selects = $('.select'), hasNoValue = selects.filter(function() { return this.value === '' && this.options[this.selectedIndex].text.trim() === 'Select one' }); if (hasNoValue.length) { hasNoValue.eq(0).focus(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="select" id="usertype"> <option value="">Select one</option> <option value="guest">Guest</option> <option value="admin">Admin</option> </select> <select class="select" id="gender"> <option value="">Select one</option> <option value="male">Male</option> <option value="female">Female</option> </select> <select class="select" id="languages"> <option value="">Select one</option> <option value="c++">c++</option> <option value="c">c</option> </select> <button id="submit">submit button</button> 

External JS Fiddle demo , for experimentation and development.

References:

• JavaScript:
  • HTMLOptionElement .
  • HTMLSelectElement .
  • String.prototype.trim() .
• jQuery:
  • click() .
  • eq() .
  • filter() .
  • focus() .