使用 jQuery POST 发送多个 <select> 元素

Question

我有这个 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>');
    });

我需要在下面的代码中修改哪些内容才能将选择元素中的多个值作为数组发布？现在它一次只向我的 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;
 });
});

Answer 1

首先，您必须为您的选择使用类而不是 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]

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