使用jQuery在表单中添加额外的html选择输入字段

正在尝试为旅游网站创建表单。对于其中一个功能，我想让用户选择他们想带多少孩子去旅行。随后，我希望表单添加新的select字段，其数量取决于所选子项的数量。这就是我到目前为止所做的：

HTML:

JS

选择数字后，将生成新标签和一个新的选择元素。我已经检查过了，number变量给出了正确的数值输出。不太清楚它为什么不起作用

我还想为每个新的选择字段添加一个标签，类似于Child 1，它根据选择的子字段的数量每次递增

任何提示都将是惊人的

谢谢

这样，无论何时更改子元素的数量，都将是选定元素的确切数量

$("select#children").on("change", function () {
    var number = parseInt($("#children").val());

    var label = "<label>Age of children: </label>";
    var newDropList = '<select class="Age"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option></select>';
    var html = '';
    $("#childrenAge").html('');
    html += label;
    for (i = 0; i < number; i++) {
        html += newDropList
    };

    $("#childrenAge").html(html);
});

这里有一种方法：

//将更改事件处理程序绑定到“children”元素： $'children'。关于'change'，函数{ //使用parseInt时，不要忘记基数和基数， //在本例中为“10”： var n=parseIntthis.value，10， //创建元素，将其文本设置为“儿童年龄”： 标签=${ “文本”：“儿童年龄” }, //创建元素： 选择=${ “类”：“年龄” }, //获取新元素所指向的元素的引用 //将要添加并清空该元素： 收件人=$'childrenAge'。为空， //在后面的循环中使用的空变量： 克隆标签，克隆选择； //为0-17岁的儿童添加元素，假设 //18岁是“成年期”开始的适当年龄： 对于var o=0；o<18；o++{ //新选项0,0返回一个元素，将其值和文本设置为 //变量“o”： 选择新选项o，o； } //如果只有一个孩子，那么指定它似乎是多余的 //“儿童1”，因此我们只需添加相关和： 如果n==1{ recipient.appendlabel.appendselect； //否则，假设我们的孩子人数为正数： }否则，如果n>0{ //使用从0到最大子级数的for循环： 对于变量i=0；i所以，如果选择了2，您想添加两个年龄选择元素，每个孩子一个？这很简单，非常感谢！您对如何向新的选择元素添加递增标签有什么建议吗？例如，Child 1、Child 2等？我有一个类似的需求我有一个多重选择我想要每个选项选择一个新的输入是否可能？这是一个惊人的答案！谢谢你花时间写这封信。然而，上面的另一个答案对我来说要清楚得多，以我的水平来阅读，所以我会使用它，但我会仔细阅读你的答案，然后集中注意力。我希望我能投上一票，但我的声誉仍然很低：不用担心；显然我有偏见，所以虽然我认为我提供了一个更好的实现，但实际上并没有太大的区别。除了在我的版本中元素使用正确之外，它们应该与特定的表单元素相关联，而不是简单地用于包装任意文本，以演示在我的演示和接受答案的演示中单击s。我还特意考虑了在只有一个孩子的情况下不必要的自动编号“child 1”。

$("select#children").on("change", function() { 
    var number = parseInt($("#children").val());
    var newDropLabel = $("#childrenAge").append("<label>Age of children: </label>");
    var newDropList = $('<select class="Age"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option></select>');
    $("div#childrenAge").append(newDropLabel);
    for (i = 0; i < number; i++) {
       $("div#childrenAge").append(newDropList);   
    };
});

$("select#children").on("change", function () {
    var number = parseInt($("#children").val());

    var label = "<label>Age of children: </label>";
    var newDropList = '<select class="Age"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option></select>';
    var html = '';
    $("#childrenAge").html('');
    html += label;
    for (i = 0; i < number; i++) {
        html += newDropList
    };

    $("#childrenAge").html(html);
});