JQuery - 多选选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2290181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery - Multiple Select Options
提问by Brad Birdsall
I am trying to grab all selected items in the following select multiple and separate them by a comma. The code is below:
我试图在以下选择多个中获取所有选定项目并用逗号分隔它们。代码如下：
<select id="ps-type" name="ps-type" multiple="multiple" size="5">
<option>Residential - Wall Insulation</option>
<option>Residential - Attic /Crawl Space Insulation</option>
<option>Residential - Foundation Insulation</option>
<option>Residential - Exterior Roof System</option>
<option>Commercial - Wall Insulation</option>
<option>Commercial - Air Barrier System (Walltite)</option>
<option>Commercial - Roof System</option>
</select>
The result I am looking for is the following:
我正在寻找的结果如下：
Residential - Wall Insulation, Commercial - Wall Insulation, ...
住宅 - 墙体绝缘，商业 - 墙体绝缘，......
回答by Sampson
You can use the :selectedselector, and the inline $.map()function as part of your chain.
您可以使用:selected选择器和内联$.map()函数作为链的一部分。
$("option:selected").map(function(){ return this.value }).get().join(", ");
回答by Guffa
Add the values to an array and use jointo create the string:
将值添加到数组并用于join创建字符串：
var items = [];
$('#ps-type option:selected').each(function(){ items.push($(this).val()); });
var result = items.join(', ');
回答by Doug Neiner
On a multiple select element, the valcommand of the selectelement will return an array of the selected options values. If no values are present, the text of the element is used:
在多选元素上，元素的val命令select将返回所选选项值的数组。如果不存在值，则使用元素的文本：
var output = $("#ps-type").val().join(', ');
update:However, when there are no selected options val()returns nullnot an empty array. One way to get around this:
更新：但是，当没有选择的选项时，val()返回的null不是空数组。解决此问题的一种方法：
var output = ($("#ps-type").val() || []).join(', ');
You can play around with it in this demo I put together.
你可以在我放在一起的这个演示中玩弄它。
From the docs:
从文档：
In the case of
<select multiple="multiple">elements, the.val()method returns an array containing each selected option.
在
<select multiple="multiple">元素的情况下，该.val()方法返回一个包含每个选定选项的数组。
回答by Raul Agrait
Something like this should do the trick:
像这样的事情应该可以解决问题：
var result = "";
$('#ps-type option:selected').each(function(i, item){
result += $(this).val() + ", ";
});
回答by Russell Giddings
var list = "";
$('#ps-type option:selected').each(function(){
list += this.value + ", ";
});
return list.substr(0, list.length - 2);
回答by Mark Bell
Here you go:
干得好：
var result = new Array();
$("#ps-type option:selected").each(function() {
result.push($(this).val());
});
var output = result.join(", ");
回答by Vilgar Mkrtchyan
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="colorselector" multiple="multiple" size="2">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>回答by Regan
Try this:
尝试这个：
var List = new Array();
$('#ps-type option:selected').each(function () {
if ($(this).length) {
var sel= {
name: $this.text()
}
}
List.push(sel);
});
var result = List.join(', ');
回答by Zakaria Acharki
The most simple solution
最简单的解决办法
You could simply use just .val()like :
你可以简单地使用.val()：
console.log( $('#ps-type').val() );<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ps-type" name="ps-type" multiple="multiple" size="5">
<option selected>Residential - Wall Insulation</option>
<option>Residential - Attic /Crawl Space Insulation</option>
<option>Residential - Foundation Insulation</option>
<option>Residential - Exterior Roof System</option>
<option selected>Commercial - Wall Insulation</option>
<option>Commercial - Air Barrier System (Walltite)</option>
<option selected>Commercial - Roof System</option>
</select>