riêng từng giá trị bằng dấu phẩy từ nhiều lựa chọn

Question

Tôi có một số <select multiple='multiple' và tôi cần hiển thị giá trị đã chọn trong div hoặc một số phần khác của trang.

Tôi đã làm điều này nhưng chuỗi là tất cả smushed với nhau. Làm thế nào tôi có thể tách riêng từng giá trị bằng dấu phẩy?

Tôi đã thực hiện một số live example với những gì tôi có cho đến thời điểm này.

Hoặc nếu bạn thích, ở đây là các mã:

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); 
}); 

Nếu bạn chọn tùy chọn 1 và 2, kết quả sẽ là:

Option 1Option 2

Những gì tôi cần là:

Option 1, Option 2

Cảm ơn

Answer 1

Bạn cần phải lập bản đồ các yếu tố để một mảng và sau đó tham gia cùng họ:

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

Working bản trình diễn: http://jsfiddle.net/AcfUz/

• http://api.jquery.com/jQuery.map/

Answer 2

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

Answer 3

Một phong cách dòng:

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

Output:

"Option 1, Option 2"