在jQuery中计算select标签中option标签的数量

Question

使用 jQuery 如何计算一个 <select> DOM 元素中 <option> 的数量？

<select data-attr="dropdown" id="input1">
  <option value="Male" id="Male">Male</option>
  <option value="Female" id="Female">Female</option>
</select>

我想找到 DOM元素中标签的数量，因为我想打开具有与下拉框中相应选项值的输入字段数量的设置面板，并在预览面板中再次更改它。上述下拉框位于由jQuery生成的我的预览面板中。

- Mercy

Answer 1

$('#input1 option').length;

这会生成2。

- nightingale2k1

Answer 2

W3C的解决方案：

var len = document.getElementById("input1").length;

- karim79

---

这种方法的一种变化，使用现代JavaScript将是：var len = document.querySelector("#input1").length; - Jacob Nelson

Answer 3

你可以使用 length 属性，而且在性能方面，length 比 size 更好。

$('#input1 option').length;

或者您可以使用 size 函数（已在jQuery v3中删除）：

$('#input1 option').size(); 

$(document).ready(function(){
   console.log($('#input1 option').size());
   console.log($('#input1 option').length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select data-attr="dropdown" id="input1">
   <option value="Male" id="Male">Male</option>
   <option value="Female" id="Female">Female</option>
</select>

- Sadikhasan

---

这并没有提供任何2009年的答案所提供的东西。 - TylerH

Answer 4

你的问题有点混淆，但是假设你想要显示面板中选项的数量：

<div id="preview"></div>

以及

$(function() {
  $("#preview").text($("#input1 option").length + " items");
});

我不确定我理解你问题的其余部分。

- cletus

Answer 5

在多选选项框中，您可以使用$('#input1 :selected').length;来获取选择的选项数。如果没有满足某个最小选项数，这可用于禁用按钮，非常实用。

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}

- Philip

---

在移除括号后，我发现这个代码可以正常工作：$('#input1 :selected').length;支持文档请参考：https://api.jquery.com/length/ - Leonard Kakande

Answer 6

最佳形式是这样的。

$('#example option').length

- Ricardo López García

---

这个只包含代码的（低价值）解决方案是4年前由Sadikhasan提供的。使用length的方法是9年前由Karim79发布的。这个答案可以被安全地从页面中清除，因为它完全是冗余的。 - mickmackusa

Answer 7

Ok, i had a few problems because i was inside a

$('.my-dropdown').live('click', function(){  
});

我的页面里有多个相同的元素，所以我使用了一个类。

当我点击下拉菜单时，通过ajax请求自动填充下拉菜单，因此我只需要使用$(this)这个元素。

所以...

我需要执行以下步骤：

$('.my-dropdown').live('click', function(){
  total_tems = $(this).find('option').length;
});

- workdreamer

Answer 8

这将按照问题要求精确地给出所有可用选项的计数。如果您已经将节点存储在变量中，则此功能非常有用。

- user1587804

Answer 9

另一种可能有用的方法。

$('#select-id').find('option').length

- zak

---

问题并不仅仅要求计算所选<option>的数量。 - Sebastian Simon