Question

我有多个名称相似的下拉菜单，我想计算选择了一个选项的下拉菜单的数量。

例如

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

在这里，我只想统计选择值1或2的那些下拉列表的数量。

Answer 1

您可以简单地检查所选选项的长度，除了$(".custom_select>option:not([value='0']):selected").length值= 0的选项之外

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>

Answer 2

如果0是禁用/默认值，则可以使用以下内容，但是我建议您使用禁用的选定选项作为默认/开始选项：

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>

Answer 3

像这样？此示例将使用选择的值1或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>

Answer 4

您可以使用filter()获取所有 selectedIndex 大于0的选择，并获取长度：

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

Answer 5

默认情况下，始终选择第一个选项。因此，如果option是有效选项，则添加另一个0。由于所有选择使用document.getElementsByClassName和{{ 1}}来获取值不为空的filter

select

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

Answer 6

age$

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

Answer 7

这里是使用JQuery filter()的另一个版本，但这是对一组匹配值的测试。

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

计算jQuery中所选选项的数量？

7 个答案: