javascript - jQuery根据值添加元素

我试图添加（和删除，但我会尝试，当这将工作时），当所述选择更改时，将基于主选择的值进行多个选择。

我有一个

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

这是小提琴
http://jsfiddle.net/xPZUn/14/

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

有什么建议么？

谢谢

最佳答案

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

$("#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的值。

关于javascript - jQuery根据值添加元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19381328/