我有这个jQuery代码，可以通过"添加"按钮在表行中添加<select>元素：
$("#add").click(function() {
$('#selected > tbody:last').append('<tr><td><select id=''plan_id''><option value=''1''>One</option><option value=''2''>Two</option><option value=''3''>Three</option></select></td></tr>');
});
在下面的代码中，我需要修改什么才能将select元素中的多个值作为数组POST？现在它一次只向我的MySQL数据库插入一个值。
$('#course_update').click(function() {
var course_id = $('#course_id').val();
var plan_id = $('#plan_id').val();
var price_id = $('#price_id').val();
var course_name = $('#course_name').val();
var course_isActive = $('#course_isActive').val();
var course_city_id = $('#course_city_id').val();
$('#update_status').html('<img src="../images/ajax-loader.gif" />');
$.post('../update.php', {
course_id: course_id,
plan_id : plan_id,
price_id: price_id,
course_name: course_name,
course_city_id: course_city_id,
course_isActive: course_isActive
}, function(data) {
$('#update_status').html(data);
return false;
});
});
首先，您必须使用类来进行选择，而不是使用id。当您使用id时，jQuery将只返回一个元素。之后，以下函数将把您作为参数提供的选择的所有值转换为数组。
/**
* Convert select to array with values
*/
function serealizeSelects (select)
{
var array = [];
select.each(function(){ array.push($(this).val()) });
return array;
}
因此：
var course_ids = serealizeSelects($('.course_id'));
例如应返回：
[1,3,2]
我会给每个select元素一个唯一的名称，数组在这里也会做得很好，参见这个例子：
$('#selected > tbody:last').append('<tr><td><select id=''plan_id'' name="my_select[]"><option value=''1''>One</option><option value=''2''>Two</option><option value=''3''>Three</option></select></td></tr>');
然后在发送之前对表单进行序列化：
var my_data = $("form").serialize();
...
编辑：完整示例：
$("#add").click(function() {
$('#selected > tbody:last').append('<tr><td><select id=''plan_id'' name="my_select[]"><option value=''1''>One</option><option value=''2''>Two</option><option value=''3''>Three</option></select></td></tr>');
});
^^^^^^^^^^^^^^^^^^^
和：
$('#course_update').click(function() {
var my_data = $("form").serialize();
$('#update_status').html('<img src="../images/ajax-loader.gif" />');
$.post('../update.php', my_data, function(data) {
$('#update_status').html(data);
return false;
});
});