Jquery Ajax 的动态发布数据值

Question

在我的页面上，我有多个这样的下拉菜单：

<select class="form-control extra-dropdown" id="extra-1" name="extra[1]">
    <option value="0">0</option>
    <option value="1">1</option>
</select>

<select class="form-control extra-dropdown" id="extra-2" name="extra[2]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="form-control extra-dropdown" id="extra-3" name="extra[3]">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

这些下拉菜单是动态创建的 - 取决于用户来自哪里决定显示什么和多少下拉菜单。

当用户更改这些选项中的任何一个时，我想使用 jQuery.ajax 运行一个 php 脚本，并且它需要为 extra[] 选择所有值。所以它会是这样的：

$('select.extra-dropdown').change(function(){
    $.ajax({
        type: 'POST',
        url: 'my-ajax-script.php',
        data: { 
            postVar1: $('#extra-1').val(), 
            postVar2: $('#extra-2').val(),
            postVar3: $('#extra-3').val()
        },
        beforeSend:function(){
            // show loader...
        },
        success:function(data){
            // show xxx...
        },
        error:function(){
            // show errors...
        }
    });
});

但是，我如何根据页面上有多少下拉选项来填充 data: {} dynicamlly。它可以从页面上的 1 个到最多 20 个不等。

Answer 1

尝试这样做：

var dataOut = [];
$.each($('.extra-dropdown'),function(index,value){
    dataOut['extra-'+index] = $(this).val();
    //or 
    //dataOut[$(this).attr('id')] = $(this).val();       
});

然后

data : dataOut