如何通过传递其 ID 通过 jQuery 获取选择的所有选项?
我只是想得到他们的价值观,而不是文字。
我不知道 jQuery,但我知道如果你得到选择元素,它包含一个“选项”对象。
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>
$.map
可能是最有效的方法。
var options = $('#selectBox option');
var values = $.map(options ,function(option) {
return option.value;
});
$('#selectBox option:selected')
如果您只想要已选择的选项,则可以添加更改选项。
第一行选择所有复选框并将它们的 jQuery 元素放入一个变量中。然后我们使用.map
jQuery 的函数将函数应用于该变量的每个元素;我们所做的只是返回每个元素的值,因为这是我们所关心的。因为我们在 map 函数中返回它们,所以它实际上按照请求构建了一个值数组。
一些答案使用each
,但map
恕我直言,这是一个更好的选择:
$("select#example option").map(function() {return $(this).val();}).get();
jQuery中有(至少)两个map
函数。Thomas Petersen 的回答使用“Utilities/jQuery.map”;这个答案使用“遍历/地图”(因此代码更简洁)。
这取决于您将如何处理这些值。假设您想从函数返回值,map
可能是更好的选择。但是,如果您要直接使用这些值,您可能想要each
。
$('select#id').find('option').each(function() {
alert($(this).val());
});
这将为您将选项值#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())
$("#id option").each(function()
{
$(this).prop('selected', true);
});
虽然,正确的方法是设置元素的 DOM 属性,如下所示:
$("#id option").each(function(){
$(this).attr('selected', true);
});
您可以通过复选框的名称获取所有“选定值”,并将它们显示在由“,”分隔的字符串中。
一个很好的方法是使用 jQuery 的 $.map():
var selected_val = $.map($("input[name='d_name']:checked"), function(a)
{
return a.value;
}).join(',');
alert(selected_val);
最有效的方法是使用$.map()
例子:
var values = $.map($('#selectBox option'), function(ele) {
return ele.value;
});
您可以为此使用以下代码:
var assignedRoleId = new Array();
$('#RolesListAssigned option').each(function(){
assignedRoleId.push(this.value);
});
对于多选选项:
$('#test').val()
返回选定值的列表。
$('#test option').length
返回选项的总数(选择和未选择)
这是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' />
这是一个简单的 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>
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);
$("input[type=checkbox][checked]").serializeArray();
或者:
$(".some_class[type=checkbox][checked]").serializeArray();
要查看结果:
alert($("input[type=checkbox][checked]").serializeArray().toSource());
如果您正在寻找带有某些选定文本的所有选项,那么下面的代码将起作用。
$('#test').find("select option:contains('B')").filter(":selected");
捷径
$(() => {
$('#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;}
我发现它简短而简单,并且可以在 Dev Tool 控制台本身中进行测试。
$('#id option').each( (index,element)=>console.log(
索引:${index},值:${element.value},文本:${element.text}) )
另一种方法是使用toArray()
带有地图的胖箭头功能,例如:
const options = $('#myselect option').toArray().map(it => $(it).val())