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
您可以使用:selected
select器和内嵌的$.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(', ');