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(', ');

您可以在this demo I put together中使用它。

来自the docs：

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

Answer 4

这样的事情可以解决问题：

var result = "";
$('#ps-type option:selected').each(function(i, item){ 
   result += $(this).val() + ", ";
});

Answer 5

var list = "";
$('#ps-type option:selected').each(function(){
  list += this.value + ", ";
});
return list.substr(0, list.length - 2);

Answer 6

你走了：

var result = new Array();

$("#ps-type option:selected").each(function() {
    result.push($(this).val());
});

var output = result.join(", ");

Answer 7

＆＃13;

$(function() {
        $('#colorselector').change(function(){
            $('.colors').hide();
            $('#' + $(this).val()).show();
        });
    });

＆＃13;

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

＆＃13;

Answer 8

试试这个：

    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(', ');

Answer 9

最简单的解决方案

您可以只使用 .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>

JQuery - 多选选项

9 个答案:

最简单的解决方案