Count Number of Selected Items in ListBox

Question

I have a listbox:

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

This listbox is allowing for multiple selections. All I am trying to do is count the number of selected items.

Here is my jQuery:

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

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

I have researched this solution from this post, but it is not working. I continue to keep being alerted with 0.

Here is my JSFiddle.

Any help is appreciated.

JDB · Accepted Answer · 2017-03-13T15:11:59.660

2

You are counting the number of elements with the ID "SelectBox" that are selected. What you want to do is count the number of <option> elements that are children of the "SelectBox" that are selected, like so:

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

edited Mar 13 '17 at 15:11

answered Mar 13 '17 at 15:07

JDB

25,172
5
72
123

ahh gotcha okay. Thank you. – Grizzly Mar 13 '17 at 15:08
OP's select only contains options , so additionally looking for options and then the :selected is extra work ... – Exception_al Mar 13 '17 at 15:11
@Exception_al - the difference is trivial, but the code is a lot clearer. You should optimize for programmer time except where the code bottleneck is significant. Don't optimize prematurely. – JDB Mar 13 '17 at 15:14
@bville be careful not to substantially change your question. If you have another question, create a new post. I believe the current answers correctly and sufficiently address the original question. – JDB Mar 13 '17 at 15:44

score 2 · Answer 2 · answered Mar 13 '17 at 15:09

2

You are missing a space between the selectors :)

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

Look at the selector Documentation

answered Mar 13 '17 at 15:09

Exception_al

1,049
1
11
21

1

Also a good point. I still prefer clearer code, but it's good to understand the difference a space can make. – JDB Mar 13 '17 at 15:18

Ionut Necula · Answer 3 · 2017-03-13T15:15:10.623

You need to separate the pseudo element :selected from the #SelectBox. When you use :selected pseudo selector you can use it plain as it is or on a option element, not on the select directly.

$("#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>

Count Number of Selected Items in ListBox

3 Answers3