Check if option is selected - With multiple selects

Question

I have multiple selects at one page. I need to check them all, and check if an option is selected.

So basically I need some jquery/js that does: If every select has a option selected then ... else ...

Right now I have"

   if($('.container select').val()){
     //Do stuff
        } else {
      // Do something else 
    }

The problem is: this code only checks the first select on the page and I need to check them all!

Can anybody help?

http://stackoverflow.com/questions/10213620/how-to-check-if-an-option-is-selected — ggdx, Feb 25 '14 at 18:36

Bic · Answer 1 · 2014-02-25T18:38:16.193

You have to grab them all, check the their values and return based on the condition presented. You can do this in an $.each loop:

var valid = true;

$('.container select').each(function () {
    //if (!$(this).children('option:selected').length) { // you can do this instead of this.value if you want.
    if (!this.value) {
        valid = false;
        return false; // this will cause the each loop to exit, instead of continue
    }
});

if (valid) {
    // process valid logic
}
else {
    // process invalid logic
}

A. Wolff · Accepted Answer · 2014-02-25T18:51:57.777

2

You could use:

if(!$('.container option:selected[value=""]').length){
    /* All SELECT have one option selected*/
}
else {
    /* At least one SELECT has no option selected */
}

Be aware, all your options must have an attribute value defined, otherwise the content option is used as value. So for default option, use e.g: <option value="">-- No Selection --</option>

edited Feb 25 '14 at 18:51

answered Feb 25 '14 at 18:39

A. Wolff

74,033
9
94
155

Every select has the option: , I think this works! Thanks – Niek95 Feb 25 '14 at 19:00

score 1 · Answer 3 · answered Aug 23 '19 at 11:02

In case of a multiple select box

<select name="demo[]" id="demo" multiple>
    <option value="a">A</option>
    <option value="b">B</option>
</select>

<script>
    $('#demo').on('change', function(){
        if($('#demo option:selected').length == $('#demo option').length)
        {
            alert('Congrats! you have selected all options');
        }
        else
        {
            alert('Nah! some options still remain unselected');
        }
    });
</script>

score 0 · Answer 4 · answered Aug 14 '17 at 07:06

try this:

 ss = document.getElementById('multiple_select_id');
    for (var i=0; i<ss.options.length; i++) {
        if (ss.options[i].selected) {
            console.log(ss.options[i].value + " is selected");
        } else {
            console.log(ss.options[i].value + " is not selected");
        }
    }

Check if option is selected - With multiple selects

4 Answers4