javascript - Jquery 根据值添加元素

Question

我正在尝试添加(并删除，但当这可行时我会尝试)当所述选择更改时基于主选择的值的多个选择。

我有一个

Number of Selects
    <select id="selectNumber">
    <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>
    </select>

还有一个

Select 1 Options
    <select id="selectN1">
    <option>option1</option>
    <option>option2</option>
    </select>

现在，更改 #selectNumber 应该根据他的值添加更多 SelectN*，这就是应该执行的操作:

$("#selectNumber").on("change", function(){
    var n = $("#selectNumber").val();
    for (i=2;i<=n;i++){
        var c = i-1;
        $("#selectN"+c).after("<br />Select "+i+" options <select id='selectN"+i+"'><option>option1</option><option>option2</option></select>");
    }
}
);

这是 fiddle http://jsfiddle.net/xPZUn/14/

在我的页面上，它运行正常，但它只添加了第二个选择项(即使在主选择中选择了 3 个以上)，我猜这是因为 for 循环无法选择动态创建的元素来附加更多元素。在 fiddle 上，它甚至没有添加第二个选择。

有什么建议吗？

谢谢

Answer 1

首先，您的代码有几个语法错误，缺少右括号和大括号。一旦这些问题被修复，它就可以工作，但是如果您选择 3，然后选择 1，您最终会得到 4 个选择元素，因此您需要清除之前附加的元素。试试这个:

$("#selectNumber").on("change", function () {
    $('.additional-select').remove(); // remove existing
    for (i = 1; i < +$("#selectNumber").val(); i++) {
        $("#selectN" + i).after('<div class="additional-select">Select ' + (i + 1) + ' options <select id="selectN' + (i + 1) + '"><option>option1</option><option>option2</option></select>');
    }
});

Example fiddle

请注意，i + 1 括在括号中，以确保附加结果，而不是单独附加 i 和 1 的值就像之前发生的那样。