用多个select中的逗号分隔每个值

时间:2011-10-27 11:09:10

标签: javascript jquery

我有<select multiple='multiple',我需要在div或页面的其他部分显示所选值。

我做了这个,但是字符串都是一起刷的。如何用逗号分隔每个值?

我用我迄今为止所做的live example做了一个。

或者如果您愿意,这里是代码:

HTML:

<select multiple='multiple' id="selMulti">
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
     <option value="4">Option 4</option>    
</select>
<input type="button" id="go" value="Go!" />
<div style="margin-top: 10px;" id="result"></div>

JS:

$("#go").click(function(){
     var selMulti = $("#selMulti option:selected").text();
     $("#result").text(selMulti);
});

如果选择选项1和2,结果将为:

Option 1Option 2

我需要的是:

Option 1, Option 2

由于

3 个答案:

答案 0 :(得分:35)

您需要将元素映射到数组,然后将它们连接起来:

$("#go").click(function(){
     var selMulti = $.map($("#selMulti option:selected"), function (el, i) {
         return $(el).text();
     });
     $("#result").text(selMulti.join(", "));
});
  

工作演示:http://jsfiddle.net/AcfUz/

答案 1 :(得分:3)

$("#go").click(function(){
     var textToAppend = "";
     var selMulti = $("#selMulti option:selected").each(function(){
           textToAppend += (textToAppend == "") ? "" : ",";
           textToAppend += $(this).text();           
     });
     $("#result").html(textToAppend);
});

答案 2 :(得分:0)

一种线型:

 $("#selMulti option:selected").map(function(){return this.text}).get().join(', ');

输出:

"Option 1, Option 2"