separe cada valor con coma de múltiples seleccione

Question

Tengo un <select multiple='multiple' y necesito mostrar el valor seleccionado en un div o en alguna otra parte de la página.

Hice esto, pero la cuerda está completamente unida. ¿Cómo puedo separar cada valor con una coma?

Hice un live example con lo que tengo hasta ahora.

O si lo prefiere, aquí está el código:

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

Si selecciona la opción 1 y 2, la el resultado será:

Option 1Option 2

Lo que necesito es:

Option 1, Option 2

Gracias

Answer 1

Es necesario asignar los elementos de una matriz y luego unirse a ellos:

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

de Trabajo demo: 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

Un estilo de línea:

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

Salida:

"Option 1, Option 2"