How to check if all select boxes has selected option using jquery?

Question

I have 7 simple select boxes:

<select>
  <option selected disabled>choose something</option>
  <option>some text</option>
  <option>some more text</option>
  <option>and more and more</option>
</select>

<select>
  <option selected disabled>choose something</option>
  <option>some text</option>
  <option>some more text</option>
  <option>and more and more</option>
</select>

<select>
  <option selected disabled>choose something</option>
  <option>some text</option>
  <option>some more text</option>
  <option>and more and more</option>
</select>

<select>
  <option selected disabled>choose something</option>
  <option>some text</option>
  <option>some more text</option>
  <option>and more and more</option>
</select>

How can I check if ALL the select boxes have something selected rather than the default option?

Set the `value` of the `select` input.... If value attribute is not specified, `text` will be treated as `value`.. — Rayon, Sep 13 '16 at 07:36
You get the Element in any number of ways, such as `document.getElemnetById('HTMLidAttribute')` then it could be as simple as testing for `Element.selected`. — StackSlave, Sep 13 '16 at 07:37
then you can check that via jquery at [here](http://stackoverflow.com/a/15987166/5813861) — yash, Sep 13 '16 at 07:38

Milind Anantwar · Answer 1 · 2016-09-13T07:56:01.683

3

You can find selected option that are disabled, if length==0 then no default element are selected.

if($('option[disabled]:selected').length == 0){
   // ALL the select boxes have something selected rather than the default option
}

edited Sep 13 '16 at 07:56

answered Sep 13 '16 at 07:39

Milind Anantwar

81,290
25
94
125

@nnnnnn: Yes. i was going to log the error first then changed the text . thanks :) – Milind Anantwar Sep 13 '16 at 07:56

Shubham Khatri · Answer 2 · 2016-09-13T08:01:28.517

Try this. Get value of select and check if its null and increment the count if its not.

$(function(){
    $('#btn').click(function(){
    var count = 0;

    $('select').each(function(){
      
    if($(this).val() != null){
       count ++; 
     }
     
  })
    if(count == 4) {
      console.log('all selected');
    }
  })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option selected disabled>choose something</option>
  <option>some text</option>
  <option>some more text</option>
  <option>and more and more</option>
</select>

<select>
  <option selected disabled>choose something</option>
  <option>some text</option>
  <option>some more text</option>
  <option>and more and more</option>
</select>

<select>
  <option selected disabled>choose something</option>
  <option>some text</option>
  <option>some more text</option>
  <option>and more and more</option>
</select>

<select>
  <option selected disabled>choose something</option>
  <option>some text</option>
  <option>some more text</option>
  <option>and more and more</option>
</select>

<button id="btn">Check</button>

This doesn't work - you need to move the `var count = 0;` *inside* the event handler. — nnnnnn, Sep 13 '16 at 07:57
Thanks @nnnnnn . It was a silly mistake on my side. I edited the code — Shubham Khatri, Sep 13 '16 at 08:01
This suggestions work perfectly for my situation, thank you! — user752746, Jun 25 '20 at 22:27

score 0 · Answer 3 · answered Mar 24 '21 at 17:36

This works for me

            var count = 0;
            $("select").each(function() {
                if(this.value === ''){
                    count++
                }
            });
            if (count === 0) {
                // all select boxes has selected option 
            }

How to check if all select boxes has selected option using jquery?

3 Answers3