2
votes

Count Nombre d'options sélectionnées dans jQuery?

J'ai plusieurs listes déroulantes avec un nom similaire, je veux compter le nombre de listes déroulantes qui ont une option sélectionnée.

Par exemple,

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

Ici, je veux pour ne compter que le nombre des listes déroulantes qui ont sélectionné la valeur 1 ou 2.

javascript jquery

4 commentaires

avez essayé $ ("# customSelect1 option"). length ?

oui, cela renvoie le nombre total d'options de liste déroulante, pas seulement celles sélectionnées.

mais qu'entendez-vous par sélectionné? s'ils sont rendus de cette manière, ils sont en fait tous sélectionnés avec une valeur de 0

@quirimo, par exemple dans la liste déroulante Un, je sélectionne l'option 2, et dans la liste déroulante Deux, l'option sélectionnée 1, et je laisse la liste déroulante 3 telle quelle, alors je veux compter combien parmi ces 3 ont une option sélectionnée sauf 0, qui est valeur par défaut.

7 Réponses :

0
votes

Si pour vous 0 est la valeur désactivée / par défaut, vous pouvez utiliser la valeur ci-dessous, mais je vous suggère d'utiliser une option sélectionnée désactivée comme option par défaut / commencer:

p >

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

function onPressed() {
  console.log($('.custom_select option[value!="0"]:selected').length);
}

1 commentaires

ouais cela a changé après avoir écrit la première réponse :)

2
votes

Vous pouvez simplement vérifier la longueur de l'option sélectionnée à l'exception de l'option ayant valeur = 0 par $ (". 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>

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

2 commentaires

Bonne réponse. :)

Merci, réponse très propre :) Fonctionne parfaitement.

0
votes

Quelque chose comme ça? Cet exemple comptera la liste déroulante avec la valeur sélectionnée 1 ou 2:

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

$('.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);
});

1 commentaires

Mieux vaut lire le code avant de copier et coller ... le code fonctionne.

0
votes

Vous pouvez utiliser filter () pour obtenir tous les select dont selectedIndex est supérieur à 0 et obtenir la longueur:

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

$('.custom_select').change(function(){
  var c = $('.custom_select').filter((i,s) => $(s)[0].selectedIndex > 0).length;
  console.log(c);
});

2 commentaires

Merci pour le plus court, mais puis-je combiner cela avec .on ('change')?

@DeepakSingh, oui, vous pouvez simplement changer cliquez pour changer ..... mis à jour la réponse .... veuillez vérifier.

0
votes

Par défaut, la première option est toujours sélectionnée. Ajoutez donc une autre option si 0 est une option valide. Puisqu'il y a une classe commune à tous les sélectionner, utilisez document.getElementsByClassName et utilisez filter pour obtenir le select dont la valeur n'est pas vide

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

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)


}

0 commentaires

0
votes

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

$(".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);
});

0 commentaires

0
votes

Voici une autre version utilisant filtre JQuery () , mais celle-ci teste un ensemble de valeurs correspondantes.

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

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

    console.log(matchs.length);
});

0 commentaires