JQuery – 多select选项

我试图抓取下面的select倍数中的所有选定的项目,并用逗号分隔它们。 代码如下:

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

我正在寻找的结果如下:

住宅 – 墙面保温,商业 – 墙面保温,…

谢谢您的帮助。 -B

您可以使用:selectedselect器和内嵌的$.map()函数作为链的一部分。

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

将值添加到数组并使用join来创buildstring:

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

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

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

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

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

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

从文档 :

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

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

干得好:

 var result = new Array(); $("#ps-type option:selected").each(function() { result.push($(this).val()); }); var output = result.join(", "); 

像这样的事情应该做的伎俩:

 var result = ""; $('#ps-type option:selected').each(function(i, item){ result += $(this).val() + ", "; }); 
 $(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> 

尝试这个:

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