15 回答
除非有问题询问 JQuery,否则应该首先用标准 javascript 回答问题,因为许多人不在他们的网站中使用 JQuery。
从 RobG如何使用 JavaScript 获取多选框的所有选定值?:
function getSelectValues(select) {
var result = [];
var options = select && select.options;
var opt;
for (var i=0, iLen=options.length; i<iLen; i++) {
opt = options[i];
if (opt.selected) {
result.push(opt.value || opt.text);
}
}
return result;
}
通常的方式:
var values = $('#select-meal-type').val();
从文档:
在
<select multiple="multiple">
元素的情况下,该.val()
方法返回一个包含每个选定选项的数组;
实际上,我发现使用纯 JavaScript(假设您不需要完全支持 IE lte 8)的最佳、最简洁、最快和最兼容的方式如下:
var values = Array.prototype.slice.call(document.querySelectorAll('#select-meal-type option:checked'),0).map(function(v,i,a) {
return v.value;
});
更新(2017-02-14):
使用 ES6/ES2015 的更简洁的方式(对于支持它的浏览器):
const selected = document.querySelectorAll('#select-meal-type option:checked');
const values = Array.from(selected).map(el => el.value);
如果你想走现代路,你可以这样做:
const selectedOpts = [...field.options].filter(x => x.selected);
运算符将...
iterable ( HTMLOptionsCollection
) 映射到数组。
如果您只对这些值感兴趣,可以添加map()
调用:
const selectedValues = [...field.options]
.filter(x => x.selected)
.map(x => x.value);
你可以使用selectedOptions
属性
var options = document.getElementById('select-meal-type').selectedOptions;
var values = Array.from(options).map(({ value }) => value);
console.log(values);
<select id="select-meal-type" multiple="multiple">
<option value="1">Breakfast</option>
<option value="2" selected>Lunch</option>
<option value="3">Dinner</option>
<option value="4" selected>Snacks</option>
<option value="5">Dessert</option>
</select>
首先,用于Array.from
将HTMLCollection
对象转换为数组。
let selectElement = document.getElementById('categorySelect')
let selectedValues = Array.from(selectElement.selectedOptions)
.map(option => option.value) // make sure you know what '.map' does
// you could also do: selectElement.options
$('#select-meal-type :selected')
将包含所有选定项目的数组。
$('#select-meal-type option:selected').each(function() {
alert($(this).val());
});
</p>
如果您需要响应更改,可以尝试以下操作:
document.getElementById('select-meal-type').addEventListener('change', function(e) {
let values = [].slice.call(e.target.selectedOptions).map(a => a.value));
})
[].slice.call(e.target.selectedOptions)
是必需的,因为e.target.selectedOptions
返回的是 a ,HTMLCollection
而不是 a Array
。该调用将其转换为,Array
以便我们可以应用map
提取值的函数。
2019 年 10 月更新
以下内容应在所有现代浏览器上“独立”工作,无需任何依赖或转译。
<!-- display a pop-up with the selected values from the <select> element -->
<script>
const showSelectedOptions = options => alert(
[...options].filter(o => o.selected).map(o => o.value)
)
</script>
<select multiple onchange="showSelectedOptions(this.options)">
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3'>three</option>
<option value='4'>four</option>
</select>
如果您想要在每个值后用中断表示;
$('#select-meal-type').change(function(){
var meals = $(this).val();
var selectedmeals = meals.join(", "); // there is a break after comma
alert (selectedmeals); // just for testing what will be printed
})
尝试这个:
$('#select-meal-type').change(function(){
var arr = $(this).val()
});
演示
$('#select-meal-type').change(function(){
var arr = $(this).val();
console.log(arr)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-meal-type" multiple="multiple">
<option value="1">Breakfast</option>
<option value="2">Lunch</option>
<option value="3">Dinner</option>
<option value="4">Snacks</option>
<option value="5">Dessert</option>
</select>
我的选择如下:
let selectElement = document.getElementById('categorySelect');
let selectedOptions = selectedElement.selectedOptions || [].filter.call(selectedElement.options, option => option.selected);
let selectedValues = [].map.call(selectedOptions, option => option.value);
它很短,在现代浏览器上很快,我们不在乎它在 1% 市场份额的浏览器上是否很快。
请注意,从大约 5 年前开始,selectedOptions 在某些浏览器上的行为很不稳定,因此用户代理嗅探在这里并非完全不合时宜。
在没有 jquery 的情况下到处工作:
var getSelectValues = function (select) {
var ret = [];
// fast but not universally supported
if (select.selectedOptions != undefined) {
for (var i=0; i < select.selectedOptions.length; i++) {
ret.push(select.selectedOptions[i].value);
}
// compatible, but can be painfully slow
} else {
for (var i=0; i < select.options.length; i++) {
if (select.options[i].selected) {
ret.push(select.options[i].value);
}
}
}
return ret;
};
如果您有多个带有 multiple='multiple' 的选择框,并且您想从每个下拉列表中选择所有选定的选项,请使用此 HTML:
<select id='Alphabets'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<select id='Alphabets' multiple='multiple'>
<option value="4">D</option>
<option value="5">E</option>
<option value="6">F</option>
</select>
<select id='Alphabets'>
<option value="7">G</option>
<option value="8">H</option>
<option value="9">I</option>
</select>
<select id='Alphabets' multiple='multiple'>
<option value="10">J</option>
<option value="11">K</option>
<option value="12">L</option>
</select>
上述 UI 的 JavaScript:
function show_Alphebets()
{
var tag =document.querySelectorAll("select");
var values="";
for(var i=1; i<4; i++) {
if(tag[i].options.length>0)
for (var option of tag[i].selectedOptions) {
values+= i+"(multiple)="+option.value+",";
}
else values+= i+"="+tag[i].value+",";
}
alert(values);
}
$('#application_student_groups option:selected').toArray().map(item => item.value)