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

时间:2009-02-26 11:32:22

标签: javascript jquery jquery-selectors

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

我只是想要获得他们的价值观,而不是文本。

18 个答案:

答案 0 :(得分:579)

使用:

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

.each() | jQuery API Documentation

答案 1 :(得分:155)

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

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

答案 2 :(得分:130)

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

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

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

如果您只想要选择的选项,可以将更改选项添加到$('#selectBox option:selected')

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

答案 3 :(得分:66)

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

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

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

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

答案 4 :(得分:46)

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

答案 5 :(得分:16)

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

虽然, CORRECT 方式是设置元素的DOM属性,如下所示:

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

答案 6 :(得分:13)

这会将 #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();});

答案 7 :(得分:11)

您可以通过复选框的名称获取所有“选定值”,并将它们显示在以“,”分隔的标记中。

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

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

alert(selected_val);

答案 8 :(得分:6)

Working example

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

示例:

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

答案 9 :(得分:3)

您可以使用以下代码:

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

答案 10 :(得分:2)

对于多选选项:

$('#test').val()返回所选值的列表。 $('#test option').length返回选项总数(已选中和未选中)

答案 11 :(得分: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>

答案 12 :(得分: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' />

答案 13 :(得分:0)

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

或者:

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

要查看结果:

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

答案 14 :(得分:0)

如果您正在查找包含所选文本的所有选项,则以下代码将起作用。

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

答案 15 :(得分: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;}

答案 16 :(得分:0)

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

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

答案 17 :(得分:0)

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