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

完成此任务的最佳方法是什么？

Answer 1

这应该很好地工作：

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

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

或者，如果您只想要选定的值：

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

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

Answer 2

如果你想要每个选定的值，你可以在select上使用.val() ，因为javascript会自动为你提供所选值的逗号分隔列表：

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

如果你想要select的每个值，那么推送到一个数组：

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

Answer 3

你可以试试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/