Jqueryマルチセレクトボックス

Question

<select multiple="multiple" class="listBox" name="drop1" id="toList"> 
    <option value="1">John Doe (1)</option> 
    <option value="2">John Doe (2)</option> 
    <option value="3">John Doe (3)</option> 
    <option value="4">John Doe (4)</option> 
    <option value="5">John Doe (5)</option> 
</select> 

このtoListのすべてのオプションを取得し、別のページに投稿する区切りリストを作成できるようにしようとしています。

これを行う最も効率的な方法は何ですか？

私はもともとやって考える：

$(#toList).each(function() { 
    var myList = myList + $(this).val(); 
    }); 

$.post('somepage.asp', userList: myList); 

これを実現する最良の方法は何ですか？

var myList = [] 
$("#toList > option").each(function() { 
    myList.push($(this).val()); 
}); 

$.post('somepage.asp', userList: myList.join(",")); 

するか、あなたが唯一の選択した値たい場合：

Answer 1

これはうまく動作するはず

var myList = [] 
$("#toList > option:selected").each(function() { 
    myList.push($(this).val()); 
}); 

$.post('somepage.asp', userList: myList.join(",")); 

Answer 2

をあなたはjQueryのmap()方法を試すことができます。

var myList = $('#toList option').map(function(){ return this.value; }); 
alert(myList.toArray().join(','));​ 

map()現在の各要素は、戻り値を含む新しいjQueryオブジェクトを生成機能により設定マッチド通過します。

リファレンス - http://api.jquery.com/map/

の作業のデモ - http://jsfiddle.net/Nr4g9/

Answer 3

あなたはすべての選択した値を使用する場合は、あなただけのjavascriptが自動的に選択された値のカンマ区切りのリストを提供しますようselectに.val()を使用することができます。

$.post('somepage.asp', userList: $("#toList").val()); 

あなたは選択のすべての値をしたい場合は、配列にプッシュ：

var values = []; 
$("option", this).each(function() { 
    values.push($(this).val()); 
}); 
$.post('somepage.asp', userList: values.join(','));