如何使用jQuery获取选择的所有选项？

IT技术 javascript jquery jquery-selectors
2021-02-01 04:27:26

如何通过传递其 ID 来通过 jQuery 获取选择的所有选项？

我只想得到他们的value观，而不是文本。

6个回答

利用：

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each() | jQuery API 文档

你也可以这样做： $("#id option").each(function(name, val) { var opt=val.text; });
2021-03-22 04:27:26
$('#id option').map((index, option) => option.value)：注意回调签名与“vanilla”JSmap函数相比是如何反转的（(item, index) =>）
2021-03-25 04:27:26
$.map 更优雅，更不容易出错（见下文）。
2021-03-31 04:27:26
所有 JavaScript 操作都不需要 jQuery。jQuery 是简化 JS 操作的不二之选。
2021-04-05 04:27:26

我不知道 jQuery，但我知道如果你得到 select 元素，它包含一个 'options' 对象。

var myOpts = document.getElementById('yourselect').options;
alert(myOpts[0].value) //=> Value of the first option

一个12岁的答案。让我们稍微现代化一下：

console.log( [...document.querySelector("#demo").options].map( opt => opt.value ) );
<select id="demo">
  <option value="Belgium">Belgium</option>
  <option value="Botswana">Botswana</option>
  <option value="Burkina Faso">Burkina Faso</option>
  <option value="Burundi">Burundi</option>
  <option value="China">China</option>
  <option value="France">France</option>
  <option value="Germany">Germany</option>
  <option value="India">India</option>
  <option value="Japan">Japan</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Mali">Mali</option>
  <option value="Namibia">Namibia</option>
  <option value="Netherlands">Netherlands</option>
  <option value="North Korea">North Korea</option>
  <option value="South Korea">South Korea</option>
  <option value="Spain">Spain</option>
  <option value="Sweden">Sweden</option>
  <option value="Uzbekistan">Uzbekistan</option>
  <option value="Zimbabwe">Zimbabwe</option>
</select>

我同意@Andrew。jQuery 高度优化，并尽可能使用更快的本机函数。我也喜欢 jquery 选择器的简单性。
2021-03-17 04:27:26
为什么不呢，@bobince？如果您主要使用 jQuery，它会更快，编写更少的代码，并且更快地不尝试弄清楚在这种情况下是否应该切换到常规 javascript。并且您的代码更加一致。
2021-04-02 04:27:26
+1。对于那些已经在普通旧 DOM 中内置了非常有效的实现的东西，不要诉诸于 jQuery 的复杂选择器魔法。
2021-04-05 04:27:26

$.map 可能是最有效的方法来做到这一点。

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

$('#selectBox option:selected')如果您只想要被选中的选项，您可以添加更改选项。

第一行选择所有复选框并将它们的 jQuery 元素放入一个变量中。然后我们使用.mapjQuery的函数将函数应用于该变量的每个元素；我们所做的就是返回每个元素的值，因为这是我们所关心的。因为我们在 map 函数内部返回它们，它实际上按照请求构建了一个值数组。

这是 IMO 最优雅的解决方案。Map 是一种非常强大的构造，正好适合这种情况。
2021-03-19 04:27:26
嗨，@PCasagrande 我有一个自定义属性名称“数据类型”。如何使用您的解决方案获得此value？我正在做的是“option.data-type”，但这给了我 NaN。提前致谢。
2021-03-22 04:27:26
嗨，@PCasagrande 我通过'$(option, this).attr("data-type")'得到了我需要的东西。但如果你有更好的东西，请告诉我。谢谢。:)
2021-04-02 04:27:26
我认为你可以只做 'return option.attr("data-type");' 在地图中。这应该给你一个数据类型值的数组。
2021-04-08 04:27:26
我真的很喜欢你的解决方案 - 这是我采用的方法。但是，如果您只想要选定的值，那就更简单了：$('#selectBox').val()将返回选定值的数组。
2021-04-10 04:27:26

一些答案使用each，但map在这里是更好的选择，恕我直言：

$("select#example option").map(function() {return $(this).val();}).get();

mapjQuery 中有（至少）两个函数。Thomas Petersen 的回答使用“Utilities/jQuery.map”；这个答案使用“遍历/地图”（因此代码更简洁）。

这取决于您将如何处理这些值。如果您想从函数中返回值，那map可能是更好的选择。但是，如果您要直接使用这些值，您可能需要each.

您实际上可以在这里使用 this.value 而不是 $(this).val() 。通过在初始选择器（#example 选项）中查找子项，您也会得到更好的服务。尽管如此，最后的 get() 还是不错的。
2021-03-23 04:27:26
@Alex Barret：好吧，完全不使用 jQuery 就可以解决这个问题。使用元素作为参数调用 jQuery 只会将元素包装在 jQuery 对象中（即没有树遍历，即没有那么昂贵）。所以也许作为一个微观优化，是的。
2021-04-02 04:27:26
它帮助我非常多，我想文本中没有value，所以我就改成text()代替val()。谢谢 ！（我让你超过1000 ;->）
2021-04-06 04:27:26
地图 FTW。这正是它应该做的。最后的 get() 似乎没有必要，但是（返回 DOM 节点，而 val() 已经给了我们一个字符串，所以...？） var opts = $('#cm_amt option').map( function( ) { 返回 parseInt($(this).val()); } );
2021-04-09 04:27:26
@sbeam：“由于返回值是一个 jQuery 包装的数组，因此get()返回的对象使用基本数组是很常见的。” -- api.jquery.com/map
2021-04-12 04:27:26 
$('select#id').find('option').each(function() {
    alert($(this).val());
});
这是票，因为我喜欢在 init 上将元素缓存到变量中，而不是使用选择器。
2021-03-20 04:27:26
也适用于 $(this) （这是正在寻找的），例如，
2021-04-07 04:27:26
其它你可能感兴趣的问题
上一篇如何通过车把中的索引访问访问数组项？ 下一篇Ng-model 不更新控制器值