How can I verify that all select boxes have a selected option through JavaScript or JQuery or…?

Question

I have 2 select boxes on a page with a variable number of options in them.

For instance:

<fieldset>
    <label for="fizzwizzle">Select a Fizzwizzle</label>
    <select name="fizzwizzle" id="fizzwizzle" size="10">
        <option>Fizzwizzle_01</option>
        <option>Fizzwizzle_02</option>
        <option>Fizzwizzle_03</option>
        <option>Fizzwizzle_04</option>
    </select>
</fieldset>
<fieldset>
    <label for="fizzbaggot">Select a Fizzbaggot</label>
    <select name="fizzbaggot" id="fizzbaggot" size="10">
        <option>Fizzbaggot_01</option>
    </select>
</fieldset>

I would like to verify that both of these select boxes have a selected option. My initial thought is to simply use JQuery but I can't seem to figure out how to do that. My attempts so far have been futile but I have the following code that I think should work with the missing link.

function verify_selectboxen_selection() {
    var allSelected = true;

    $('select').each(function() {
      /* if select box doesn't have a selected option */
            allSelected = false;
            break;
    });

    if (!allSelected) {
        alert('You must select a Job and a Disposition File.');
    }
    return allSelected;
}

Seems simple enough. Thoughts?

Answer 1

In jQuery you can use the :selected selector to get the total options selected. This number out to match the number of select's themselves:

if ($("select").length === $("option:selected").length) {
  // they match
}

Answer 2

I would like to verify that both of these select boxes have a selected option

It's not possible for a (non-multiple) select box not to have a selected option! If you don't declare selected on one of the option​s, the browser will automatically select the first option.

So: return true; :-)

If you want to have an ‘unselected’ initial state, you'd have to include a no-option option for it, usually the first one:

<select name="fizzbaggot">
    <option value="" selected="selected">(Select a fizzbaggot)</option>
    <option>foo</option>
    <option>baz</option>
    <option>bar</option>
</select>

Then you can check whether a different option to that one has been selected, either by saying:

$('select').each(function() {
    if ($(this).val()!=='')
        allSelected= false;
});

Or, if you might want to use the empty string as a valid value, you can just look at the index of the selected option:

$('select').each(function() {
    if (this.selectedIndex===0)
        allSelected= false;
});

Answer 3

You can use the :selected selector for this.

var unselected = [] 
$('select').each(function(){
    if (0 == $(this).find('option:selected').length) {
        unselected.push(this.id);
    }
});

if (unselected.length != 0) {
    // unselected contains the ids of non-selected select boxes
}

Or you could check their values with val(). This presumes that you have a default option with no value (ie empty string value).

var unselected = [] 
$('select').each(function(){
    if ('' == $(this).val()) {
        unselected.push(this.id);
    }
});

if (unselected.length != 0) {
    // unselected contains the ids of non-selected select boxes
}

Answer 4

 function checkSelects() {
        return $("select :selected").length == $("select").length;
    }

alert(checkSelects());