Question

使用jQuery，在更改/选择事件时，如何检查并查看多个选择框是否包含任何选定的项目？我正在寻找的是如何捕获并获得总数？

如果验证不等于0，则会将按钮默认禁用属性设置为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

假设您的<button>位于表单元素中，以下内容适用于您：

// 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>

参考文献：

Answer 2

您可以使用jQuery :checked选择器捕获所有已检查的元素。对于计数，你可以这样做：

$( "input:checked" ).length;

然后，您可以执行条件查看是否检查了零个或多个元素：

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

抓取页面上的所有选项，然后循环浏览它们，同时为每个选项添加更改事件。

然后在该更改事件中，调用一个方法来计算选择了多少项选项。

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;
  }
}

希望这有帮助。

Answer 5

这是一个通过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);
}

}）;

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

5 个答案: