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

Posted 2023-02-23

【中文标题】如何使用 jQuery 获取选择的所有选项？

【英文标题】：How to get all options of a select using jQuery?

【发布时间】：2010-10-10 01:30:39

【问题描述】：

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

我只想获取它们的值，而不是文本。

【参考方案1】：

另一种方法是使用toArray() 以便在地图上使用胖箭头功能，例如：

const options = $('#myselect option').toArray().map(it => $(it).val())

【参考方案2】：

我不知道 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>

【讨论】：

+1。不要使用 jQuery 复杂的选择器魔法来处理那些已经在普通的旧 DOM 中内置了非常有效的实现的东西。

为什么不呢，@bobince？如果您主要使用 jQuery，那么编写的代码会更快，而且在这种情况下不尝试确定是否应该切换到常规 javascript 会更快。而且你的代码更加一致。

我同意@Andrew。 jQuery 经过高度优化并尽可能使用更快的原生函数。我也喜欢 jquery 选择器的简单性。

【参考方案3】：

这会将 #myselectbox 的选项值放入一个干净的数组中：

// First, get the elements into a list
var options = $('#myselectbox option');

// Next, translate that into an array of just the values
var values = $.map(options, e => $(e).val())

【参考方案4】：

    var arr = [], option='';
$('select#idunit').find('option').each(function(index) 
arr.push ([$(this).val(),$(this).text()]);
//option = '<option '+ ((result[0].idunit==arr[index][0])?'selected':'') +'  value="'+arr[index][0]+'">'+arr[index][1]+'</option>';
            );
console.log(arr);
//$('select#idunit').empty();
//$('select#idunit').html(option);

【参考方案5】：

我发现它简短而简单，并且可以在开发工具控制台本身中进行测试。

$('#id option').each( (index,element)=>console.log( 索引：$index，值：$element.value，文本：$element.text) )

【参考方案6】：

捷径

$(() => 
$('#myselect option').each((index, data) => 
    console.log(data.attributes.value.value)
))

或

export function GetSelectValues(id) 
const mData = document.getElementById(id);
let arry = [];
for (let index = 0; index < mData.children.length; index++) 
    arry.push(mData.children[index].value);

return arry;

【参考方案7】：

这里是一个简单的例子，在jquery中获取所有的值，文本，或者被选中项的值，或者被选中项的文本

$('#nCS1 > option').each((index, obj) => 
   console.log($(obj).val());
)

printOptionValues = () => 

  $('#nCS1 > option').each((index, obj) => 
    console.log($(obj).val());
  )



printOptionTexts = () => 
  $('#nCS1 > option').each((index, obj) => 
    console.log($(obj).text());
  )


printSelectedItemText = () => 
  console.log($('#nCS1 option:selected').text());


printSelectedItemValue = () => 
  console.log($('#nCS1 option:selected').val());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select size="1" id="nCS1" name="nCS1" class="form-control" >
					<option value="22">Australia</option>
          <option value="23">Brunei</option>
          <option value="33">Cambodia</option>
          <option value="32">Canada</option>
          <option value="27">Dubai</option>
          <option value="28">Indonesia</option>
          <option value="25">Malaysia</option>				
</select>
<br/>
<input type='button' onclick='printOptionValues()' value='print option values' />
<br/>
<input type='button' onclick='printOptionTexts()' value='print option texts' />
<br/>
<input type='button' onclick='printSelectedItemText()' value='print selected option text'/>
<br/>
<input type='button' onclick='printSelectedItemValue()' value='print selected option value' />

【参考方案8】：

这是一个简单的 jQuery 脚本：

var items = $("#IDSELECT > option").map(function() 
    var opt = ;
    opt[$(this).val()] = $(this).text();
    return opt;
).get();
var selectvalues = [];

for(var i = 0; i < items.length; i++) 
    for(key in items[i]) 


        var id = key;
        var text = items[i][key];

        item = 
        item ["id"] = id;
        item ["text"] = text;

        selectvalues.push(item);

    

console.log(selectvalues);
copy(selectvalues);

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

【参考方案9】：

用途：

$("#id option").each(function()

    // Add $(this).val() to your list
);

.each() | jQuery API Documentation

【讨论】：

所有的 JavaScript 操作都不需要 jQuery。 jQuery是简化JS操作的首选。

你也可以这样做：$("#id option").each(function(name, val) var opt=val.text; );

$.map 更优雅，更不容易出错（见下文）。

$('#id option').map((index, option) => option.value) ：注意与“vanilla” JS map 函数（(item, index) =>）相比，回调签名是如何反转的

【参考方案10】：

对于多选选项：

$('#test').val() 返回选定值的列表。 $('#test option').length 返回选项的总数（选择和未选择）

【参考方案11】：

您可以通过复选框的名称获取所有“选择的值”，并将它们显示在一个由“，”分隔的字符串中。

一个很好的方法是使用 jQuery 的 $.map():

var selected_val = $.map($("input[name='d_name']:checked"), function(a)
    
        return a.value;
    ).join(',');

alert(selected_val);

【讨论】：

这段代码很不可读，即使它有点酷我也不会使用它。

还有一个问题是关于select 和option 而不是复选框。

【参考方案12】：

您可以使用以下代码：

var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function()
    assignedRoleId.push(this.value);
);

【参考方案13】：

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

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

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

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

【讨论】：

您实际上可以在这里使用 this.value 而不是 $(this).val() 。通过在初始选择器（#example 选项）中找到孩子，您也会得到更好的服务。不过最后的 get() 很好。

@Alex Barret：嗯，完全不使用 jQuery 也可以解决这个问题。使用元素作为参数调用 jQuery 只会将元素包装在 jQuery 对象中（即没有树遍历，即不那么昂贵）。所以也许作为一个微优化，是的。

地图 FTW。这正是它应该做的。最后的 get() 似乎没有必要，但是（它返回 DOM 节点，并且 val() 已经给了我们一个字符串，所以...？） var opts = $('#cm_amt option').map( function( ) return parseInt($(this).val()); );

@sbeam：“由于返回值是一个 jQuery 包装的数组，所以 get() 返回的对象与基本数组一起工作是很常见的。” -- api.jquery.com/map

它对我帮助很大，我想要的是文本而不是值，所以我只是改为text() 而不是val()。谢谢 ！ （我让你超过了 1000 ;->）

【参考方案14】：

$('select#id').find('option').each(function() 
    alert($(this).val());
);

【讨论】：

这是票，因为我喜欢在初始化时将元素缓存到变量中，而不是使用选择器。

也适用于 $(this) （这是正在寻找的）例如，

【参考方案15】：

如果您正在寻找带有某些选定文本的所有选项，那么下面的代码将起作用。

$('#test').find("select option:contains('B')").filter(":selected");

【参考方案16】：

Working example

最有效的方法是使用$.map()

示例：

var values = $.map($('#selectBox option'), function(ele) 
   return ele.value; 
);

【参考方案17】：

$.map 可能是最有效的方法。

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

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

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

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

【讨论】：

这是 IMO 最优雅的解决方案。地图是一个非常强大的结构，正好适合这种情况。

我真的很喜欢您的解决方案 - 这是我采用的方法。但是，如果您只想要选定的值，那就更简单了：$('#selectBox').val() 将返回一个包含选定值的数组。

嗨，@PCasagrande 我有一个自定义属性名称“数据类型”。如何使用您的解决方案获得此价值？我正在做的是'option.data-type'，但这给了我NaN。提前致谢。

嗨，@PCasagrande 我通过执行 '$(option, this).attr("data-type")' 得到了我需要的东西。但是，如果您有更好的东西，请告诉我。谢谢。 :)

我认为你可以做'return option.attr("data-type");'在地图中。这应该会给你一个数据类型值的数组。

【参考方案18】：

$("input[type=checkbox][checked]").serializeArray();

或者：

$(".some_class[type=checkbox][checked]").serializeArray();

查看结果：

alert($("input[type=checkbox][checked]").serializeArray().toSource());

【参考方案19】：

$("#id option").each(function()

    $(this).prop('selected', true);
);

虽然，CORRECT的方式是设置元素的DOM属性，像这样：

$("#id option").each(function()
    $(this).attr('selected', true);
);

【讨论】：

不会是 .attr('selected', 'selected') 吗？