如何使用jQuery获取select的所有选项?


Answers:


612

采用:

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

.each()| jQuery API文档


63
所有JavaScript操作都不需要jQuery。jQuery是简化JS操作的选择问题。
ruuter 2014年

8
您也可以这样做:$(“#id option”)。each(function(name,val){var opt = val.text;});
kofifus 2014年

3
$.map更加优雅,错误更少(见下文)。
艾略特·卡梅伦

1
$('#id option').map((index, option) => option.value):请注意,与“普通” JS map函数((item, index) =>)相比,回调签名是如何反转的
imrok

168

我不了解jQuery,但我确实知道,如果您获得select元素,它就会包含一个“选项”对象。

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

74
+1。对于那些已经在普通的旧DOM中内置了相当高效的实现的事物,请不要使用jQuery的复杂选择器魔术。
bobince

19
为什么不呢,@ bobince?如果您主要使用jQuery,则既可以更快地编写代码,又可以更快地编写代码,并且可以更快地尝试确定是否应该在这种情况下切换到常规javascript。而且您的代码更加一致。
安德鲁(Andrew)

139

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

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

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

$('#selectBox option:selected')如果只希望选择更改选项,则可以添加更改选项。

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


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

1
我真的很喜欢您的解决方案-这就是我所采用的方法。但是,如果只希望选择的值,则更为琐碎:$('#selectBox').val()将返回选择值的数组。
whoisthemachine 2015年

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

嗨,@PCasagrande,我通过执行'$(option,this).attr(“ data-type”)'获得了所需的内容。但是,如果您有更好的选择,那就告诉我。谢谢。:)
Me_developer

我认为您可以执行'return option.attr(“ data-type”);' 在地图上。那应该给你一个数据类型值的数组。
PCasagrande

74

一些答案使用each,但是map恕我直言,这是更好的选择:

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

mapjQuery 中至少有两个函数。Thomas Petersen的答案使用“ Utilities / jQuery.map”;该答案使用“遍历/映射”(因此使用了更简洁的代码)。

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


4
您实际上可以在此处使用this.value代替$(this).val()。在初始选择器(#example选项)中找到子级也可以为您提供更好的服务。不过,最后的get()很好。
亚历克斯·巴雷特

1
@Alex Barret:嗯,根本不用jQuery就可以解决这个问题。以一个元素作为参数调用jQuery只会将该元素包装在jQuery对象中(即不遍历树,即不那么昂贵)。因此,也许是微优化。
cic

贴图FTW。这正是应该做的事情。最后的get()似乎是不必要的,但是(返回DOM节点,而val()已经给了我们一个字符串,所以...?)var opts = $('#cm_amt option')。map(function( ){return parseInt($(this).val());});
sbeam 2011年

3
@sbeam:“由于返回值是一个jQuery封装的数组,因此get()返回的对象使用基本数组非常常见。” - api.jquery.com/map
中投公司

它帮助我非常多,我想文本中没有价值,所以我就改成text()代替val()。谢谢 !(我让您超过了1000 ;->
ParPar 2012年

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

1
这就是问题,因为我喜欢在init上将元素缓存到变量中,而不是使用选择器。
Doug Beard

1
也可以与$(this)(正在寻找的)一起使用,例如
Hugh Seagraves

16
$("#id option").each(function()
{
    $(this).prop('selected', true);
});

虽然,正确的方法是设置元素的DOM属性,如下所示:

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

4
不是.attr('selected','selected')吗?
v010dya 2015年

16

这将为#myselectbox您提供一个很好的干净数组的选项值:

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

// Next, translate that into an array of just the values
var values = $.map(domelts, function(elt, i) { return $(elt).val();});

您可以将其缩短为:$.map(domelts, elt=> $(elt).val())
Jonno_FTW

11

您可以将所有“选定的值”作为复选框的名称,并以“,”分隔的字符串形式显示。

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

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

alert(selected_val);

6
该代码非常难以阅读,即使它很酷,我也永远不会使用它。
点击Upvote

7
同样的问题是关于selectoption不是复选框。
痴呆症




1

这是带有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>

1

这是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' />



0

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

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

0

捷径

$(() => {
$('#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;}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.