发布动态附加的下拉数据

Question

我的主页上有一个下拉菜单，在选择时会根据所选值附加额外的下拉菜单，如下所示：

https://jsfiddle.net/harunthuo/he55vwca/3/

我面临的挑战是：下拉列表将根据在“儿童”下拉列表中选择的值动态附加。所以我想知道我将如何捕获每个附加下拉列表的值并在我的帖子中捕获它。附加的下拉菜单都具有相同的名称和类属性，所以如果我要选择附加的下拉菜单：

$('#children-number').on('change', '.children-num', function(e){
    var child_num = e.target.value;
    console.log(child_num);
});

这将捕获在每个附加下拉列表中选择的值。我如何从这里开始，以便我捕获这些值并将它们全部发送到我的帖子，以便我捕获这些值：

$('#children-number').on('change', '.children-num', function(e){
        var child_num = e.target.value;
        console.log(child_num);

        var data = $('#myForm').serializeArray();
        data.push({name: 'ages', value: child_num});

        $.post("page.php", data);
});

这最后一部分是我有点卡住的地方。谢谢

Answer 1

好的，也许这可以帮助您继续前进：

试试这个（但也许在更改功能之外，也许是一个按钮点击）：

 var dataArr = [];  
 $('.children-num').each(function() {
    value = $(this).val();
    dataArr.push(value);
 });

然后代替

data.push({name: 'ages', value: child_num});

做

data.push({name: 'ages', value: dataArr});

现在你应该得到

["ages"]=> array()

或类似的东西

here's a fiddle 在您单击“click-me”按钮后在控制台中记录子编号的值

编辑：我还建议不要在更改事件中执行$.post，而是在单击按钮或类似事件时执行，因为每次更改选择时它都会发布，我认为这不是一个好习惯