CODEWITHSUNDEEP
javascriptjquery
Deepak Singh
Deepak Singh

Reputation: 129

Count Number of selected Options in jQuery?

I have multiple dropdowns with a similar name, I want to count the number of dropdowns which have an option selected.

For example, 

<select class="custom_select" name="customSelect1" id="customSelect1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect2" id="customSelect2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect3" id="customSelect3">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Here I want to count the number of only those drop downs which have selected value 1 or 2.

Upvotes: 2

Views: 3816

Answers (7)

Shidersz
Shidersz

Reputation: 17190

Here is another version using JQuery filter(), but this one test for a set of matched values.

$('.custom_select').change(function()
{
    var matchs = $('.custom_select').filter((i, e) =>
    {
        return ["1", "2"].includes($(e).val());
    });

    console.log(matchs.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="custom_select" name="customSelect1" id="customSelect1">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect2" id="customSelect2">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect3" id="customSelect3">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Upvotes: 0

Mamun
Mamun

Reputation: 68933

You can use filter() to get all the select whose selectedIndex is greater than 0 and the get the length:

$('.custom_select').change(function(){
  var c = $('.custom_select').filter((i,s) => $(s)[0].selectedIndex > 0).length;
  console.log(c);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom_select" name="customSelect1" id="customSelect1">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect2" id="customSelect2">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect3" id="customSelect3">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Upvotes: 0

Satheesh
Satheesh

Reputation: 171

$(".custom_select").change(function() {
let selectedDropDownCount = 0;
let x = document.querySelectorAll(".custom_select");
x.forEach( y => {
if($("#"+ y.getAttribute("id")).val() != "0")
{
selectedDropDownCount++;
}
}
)
alert("Count : " + selectedDropDownCount);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom_select" name="customSelect1" id="customSelect1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect2" id="customSelect2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect3" id="customSelect3">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Upvotes: 0

quirimmo
quirimmo

Reputation: 9988

If for you 0 is the disabled/default value, you can use the below, but I would suggest you to use a disabled selected option as default/begin option:

function onPressed() {
  console.log($('.custom_select option[value!="0"]:selected').length);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom_select" name="customSelect2" id="customSelect2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect3" id="customSelect3">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<button onclick="onPressed()">Click for showing selected ones</button>

Upvotes: 0

brk
brk

Reputation: 50291

By default the first option is always selected.So add another option if 0 is valid option.Since there is a common class across all the select use document.getElementsByClassName and use filter to get the select whose value is not empty

function getSelected() {
  // using spread operator to convert collection to array
  // using array filter methods to create a new array with select which have value
  let k = [...document.getElementsByClassName('custom_select')].filter(item => {
    return item.value !== ''
  })
  // this will give number of selects whose value is nit empty
  console.log(k.length)


}
<select class="custom_select" name="customSelect1" id="customSelect1">
  <option value=''>Selected</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect2" id="customSelect2">
  <option value=''>Selected</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect3" id="customSelect3">
  <option value=''>Selected</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<button onclick='getSelected()'>Get Selected</button>

Upvotes: 0

Kiran Shahi
Kiran Shahi

Reputation: 7980

You can simply check the length of selected option except option having value = 0 by $(".custom_select>option:not([value='0']):selected").length 

console.log($(".custom_select>option:not([value='0']):selected").length)
$(".custom_select").off("change").on("change", function(){
	console.log($(".custom_select>option:not([value='0']):selected").length)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom_select" name="customSelect1" id="customSelect1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect2" id="customSelect2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect3" id="customSelect3">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Upvotes: 2

Parn
Parn

Reputation: 918

Something like this? This example will count dropdown with selected value 1 or 2:

$('.custom_select').change(function(){
  var count = 0;
  $.each($(".custom_select option:selected"), function(){
    if ( $(this).val() == 1 || $(this).val() == 2) {
      ++count;
    }
  });
  console.log('Dropdown count = ' + count);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom_select" name="customSelect1" id="customSelect1">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect2" id="customSelect2">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<select class="custom_select" name="customSelect3" id="customSelect3">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

Upvotes: 0

Related Questions