如何使用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?

Answer 1

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
}

Answer 2

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>

Answer 3

This works for me

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