0

我正在尝试添加（并删除，但我会在这可行时尝试）当所述选择更改时，根据主选择的值进行一些选择。

我有一个

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 循环无法选择动态创建的元素来追加更多。在小提琴上，它甚至没有添加第二个选择。

有什么建议么？

谢谢

4

1 回答 1

3

首先，您的代码有几个语法错误，缺少右括号和大括号。一旦这些被修复，它就可以工作，但是如果你 select 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>');
    }
});

示例小提琴

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

于 2013-10-15T12:38:24.003 回答