JQuery - 多选选项

Question

我试图抓取以下选择多个中的所有选定项目并用逗号分隔它们.代码如下:

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

我要找的结果如下:

住宅 - 墙体保温,商业 - 墙体保温,......

Answer 1

您可以使用:selected选择器和内联$.map()函数作为链的一部分.

$("option:selected").map(function(){ return this.value }).get().join(", ");

Answer 2

将值添加到数组并用于join创建字符串:

var items = [];
$('#ps-type option:selected').each(function(){ items.push($(this).val()); });
var result = items.join(', ');

Answer 3

在多选元素上,元素的val命令select将返回所选选项值的数组.如果不存在任何值,则使用元素的文本:

var output = $("#ps-type").val().join(', ');

更新:但是,当没有选定的选项val()返回时null不是空数组.解决这个问题的一种方法:

var output = ($("#ps-type").val() || []).join(', '); 

你可以在我放在一起的这个演示中玩弄它.

来自文档:

对于<select multiple="multiple">元素,该.val()方法返回包含每个选定选项的数组.