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/です

私のページでは正常に実行されますが、2番目の選択項目のみが追加されます(メインの選択で3つ以上が選択されている場合でも) for ループが動的に作成された要素を選択してさらに追加できないことが原因だと思います. フィドルでは、2番目の選択さえ追加しません。

助言がありますか？

ありがとう

4

1 に答える 1

3

まず、コードにいくつかの構文エラーがあり、閉じ括弧と中括弧がありません。それらが修正されると機能しますが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>');
    }
});

フィドルの例

以前のように の値と個別に追加されるi + 1のではなく、結果が確実に追加されるように、 が括弧で囲まれていることに注意してください。i1

于 2013-10-15T12:38:24.003 に答える