使用jQuery检查并查看选择框是否具有/或包含选择的选项

Question

Using jQuery, upon a change/select event, how can I check and see if multiple select boxes contain any selected items? All I am looking for is how to capture and obtain a total count of this?

Based on a validation if not equal to 0, this would set a buttons default disabled attribute to false.

<form id="myform">
Cars
 <select id="car">
  <option value=""></option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br><br>
Fruits
 <select id="fruits">
  <option value=""></option>
  <option value="apple">apple</option>
  <option value="banana">banana</option>
  <option value="pear">pear</option>
  <option value="strawberry">strawberry</option>
  <option value="mango">mango</option>
  <option value="orange">orange</option>
</select>
</form>

$('#myform select).bind("change select",function() {


});

Answer 1

Assuming your <button> is within the form element, the following should work for you:

// binding the anonymous function of the on() method
// as the event-handler for the 'change' event:
$('#myform').on('change', function() {

  // caching the $(this) (the <form>, in this case):
  var form = $(this);

  // finding the <button> element(s) within the <form>
  // (note that a more specific selector would be
  // preferable), and updating the 'disabled' property,
  // finding all <option> elements that are selected,
  // filtering that collection:
  form.find('button').prop('disabled', form.find('select option:selected').filter(function() {

    // retaining only those whose values have a length
    // (in order to not-count the default 'empty'
    // <option> elements:
    return this.value.length;

  // and then checking if that collection is
  // equal to 0, to obtain a Boolean true
  // disabling the <button>, or a false to
  // enable the <button>:
  }).length === 0);

// triggering the change event on page-load
// to appropriately enable/disable the <button>:
}).change();

 $('#myform').on('change', function() { var form = $(this); form.find('button').prop('disabled', form.find('select option:selected').filter(function() { return this.value.length; }).length === 0); }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform"> Cars <select id="car"> <option value=""></option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <br> <br>Fruits <select id="fruits"> <option value=""></option> <option value="apple">apple</option> <option value="banana">banana</option> <option value="pear">pear</option> <option value="strawberry">strawberry</option> <option value="mango">mango</option> <option value="orange">orange</option> </select> <button>Submission button</button> </form> 

References:

• change() .
• filter() .
• find() .
• on() .
• prop() .

Answer 2

You can use the jQuery :checked selector to capture all elements that are checked. For the count, you can do:

$( "input:checked" ).length;

You can then do your condition to view if there are zero or more elements checked:

var selected = $( "input:checked" ).length;
if(selected > 0)
//do something

Answer 3

$('#myform select').on('change', function() {
  var count = 0;
  $('#myform').find('select').find('option').each(function(){
    if ($(this).is(':selected')){
      count++;
    }
  });

  if (count < 0){
    $('#mybutton').prop('disabled', false);
  } else {
    $('#mybutton').prop('disabled', true);
});

Answer 4

Grab all the selects on the page and just loop through them while adding a change event to each one.

Then in that change event, call a method that counts up how many selects have items selected.

https://jsfiddle.net/x833qr20/3/

// put an on change event on all the selects, can be done in onload
var ddl = $('select');
for (i = 0; i < ddl.length; i++) {
  ddl[i].onchange = function() {
    CountAllSelectedDDL();
  }
}

// function that fires when one select gets changed
function CountAllSelectedDDL() {
  var ddl = $('select');
  var count = 0;
  for (i = 0; i < ddl.length; i++) {
    if (ddl[i].selectedIndex > 0) {
      count++;
    }
  }

  var button = document.getElementById('button');
  if (count > 0) {
    // set the buttons default disabled attribute to false
    button.disabled = false;
  } else {
    button.disabled = true;
  }
}

Hope this helps.

Answer 5

Here's a working example via jQuery

https://jsfiddle.net/wedh87bm/

$('#myform select').bind("change select",function() {

var completed = true;
$('#myform select').each(function(){
    if($(this).val() == "")
    {
        completed = false;

    }
});

if(completed)
{
    $('#validate').prop("disabled",false);
} else
{
    $('#validate').prop("disabled",true);
}

});