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?

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?

• javascript
• jquery
• html
• html-select

• where is option value? – yash Commented Sep 13, 2016 at 7:36
• Set the value of the select input.... If value attribute is not specified, text will be treated as value.. – Rayon Commented Sep 13, 2016 at 7: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 Commented Sep 13, 2016 at 7:37
• then you can check that via jquery at here – yash Commented Sep 13, 2016 at 7:38

3 Answers 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
}

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./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 works for me

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