1

基本的に私がやろうとしているのは、ページに単一のテキストボックスを持つことです。ユーザーが数字を入力すると、その下にX個の追加テキストボックスが自動生成されます。

ドロップダウン ボックスに基づいて機能させることができましたが、このアプリケーションではドロップダウン ボックスは機能しません。

<html>

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>

$(document).ready(function(){
$("#ppl").change(function(){

    // The easiest way is of course to delete all textboxes before adding new ones
    //$("#holder").html("");

    var count = $("#holder input").size();
    var requested = parseInt($("#ppl").val(),10);

    if (requested > count) {
        for(i=count; i<requested; i++) {
        var $ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'});        
            $("#holder").append($ctrl);
        }
}
    else if (requested < count) {
        var x = requested - 1;
        $("#holder input:gt(" + x + ")").remove();
    }
});
});
</script>

</head>
<body>
<SELECT id="ppl">
            <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>
</SELECT>
<div id="holder"></div>
</body>
</html>

また、jquery ではなく ajax を使用してこのようなことを行う別の方法はありますか?

デモ:フィドル

4

2 に答える 2

2

あなたのフィドルにはすべてが HTML 部分に含まれていたので、私はあなたのフィドルを再び更新しました。jsFiddle .

それらすべてに一意の名前を付けるには、i次のように名前フィールドの末尾にインデックス ( ) を連結するだけです。

for (i = count; i < requested; i++) {
  var $ctrl = $('<input/>').attr({
                type: 'text',
                name: 'text' + i,
                value: 'text'
            });
  $("#holder").append($ctrl);
}

これにより、一意の名前が付けられます: ("text1"、"text2"、.. など)。更新されたフィドルですでに変更しています。

AJAXの質問に関しては@Barmarに同意します。サーバーのみが提供できるデータを取得する必要がない限り、追加のサーバーリクエストを行う意味はありません。方程式に別の要因を追加するだけで、物事が遅くなる可能性があります. JavaScript がまったく同じことをサーバー側ではなくクライアント側で実行できる場合、それは間違いなくはるかに高速なオプションです。

于 2013-05-02T01:18:34.297 に答える