Question

我有一个列表框：

<div>
  <select id="SelectBox" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</div>

此列表框允许多项选择。我所要做的就是计算所选项目的数量。

这是我的jQuery：

$("#SelectBox").change(function(){
    countSelectedItems();
});

function countSelectedItems(){
    var count = $("#SelectBox:selected").length;
  alert(count);
}

我已经从this post研究了这个解决方案，但它没有用。我继续通过0收到提醒。

这是我的JSFiddle。

感谢任何帮助。

Answer 1

您正在计算选中ID为“SelectBox”的元素数量。你想要做的是计算所选择的“SelectBox”子元素的<option>个元素的数量，如下所示：

#SelectBox > option:selected

$(function(){

  $('#debug').text( "number of selected options: " + $('#SelectBox > option:selected').length );

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="SelectBox" multiple>
<option selected>foo</option>
<option selected>bar</option>
<option>baz</option>
</select>

<div id="debug"></div>

Answer 2

您在选择器之间缺少空格：）

var count = $("#SelectBox :selected").length;

查看选择器Documentation

Answer 3

您需要将伪元素:selected与#SelectBox分开。当您使用:selected伪选择器时，您可以原样使用它，也可以在option元素上使用它，而不是直接在select上使用。

$("#SelectBox").change(function() {
  countSelectedItems();
}).change();

function countSelectedItems() {
  var count = $("#SelectBox :selected").length;
  //console.log(count);
  $('#count span').text(count);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="SelectBox" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <p id='count'>The count is: <span></span></p>
</div>

计算ListBox中的所选项目数

3 个答案: