0

カートの追加ボタンをクリックして、新しい行を追加する必要があります。行には、3 つのテキスト ボックスと 1 つのドロップダウン リストが含まれています。ドロップダウンリストの値はデータベースからのものです。

別の行を追加すると、データベースの値が前のドロップダウン リストに追加され、新しいドロップダウン リストが空になります。最初の行の代わりに新しい行を追加する必要があります。

どうすれば続行できますか？jQuery JavaScript ライブラリを使用したいと思います。

これは私のコードです：

$("#addItems").click(function() { $.getJSON('Servlet1”',function(json){

    $('<tr id="shipdetail" style="margin-top:20px;"><td><input  type="text" id="cptd"/></td><td><select id="productopt"  tabindex="1"></select></td><td><span class="activeMinus"></span><input  name="quantity" id=1 class="input-quantity" value=1><span class="activePlus"></span></td><td id="tdataid"></td><td class="remove"></td></tr>').appendTo(".cptb2"); 
    for (var i = 0; i < json.length; i++) {
        $('<option>'+json[i].productName+'</option>').appendTo("#productopt");
    }
}): $('#productopt').change(function(){

    var code = $("#productopt").val();
    var name= code.split(']');
    var s=name[1];
    $.post('ProductsInfo',
    {
        productName:s
    },
    function(json){

        document.getElementById("cptd").value=json.code

        document.getElementById("tdataid").innerHTML=json.price;
        $("#productopt").empty();
        $('<option>'+json.name+'</option>').appendTo("#productopt");

    });
});
4

2 に答える 2

0

問題は、productopt の select 要素に特定の ID を持つテンプレートを作成していることだと思います。このテンプレートを作成するたびに、ID が重複した dom 要素が作成されます。これは、appendTo のセレクターがおそらく最初に見つかったセレクターに追加されることを意味します。

テンプレートステートメントの結果を変数に取り込む場合

var template = $('<tr id="shipdetail" style="margin-top:20px;"><td><input  type="text" id="cptd"/></td><td><select tabindex="1"></select></td><td><span class="activeMinus"></span><input  name="quantity" id=1 class="input-quantity" value=1><span class="activePlus"></span></td><td id="tdataid"></td><td class="remove"></td></tr>').appendTo(".cptb2");

次に、appendTo セレクターをテンプレートにスコープすると、機能する可能性が高くなります。このように select 要素に id は必要ないことに注意してください。

for (var i = 0; i < json.length; i++) {
    $('<option>'+json[i].productName+'</option>').appendTo("select", template);
}
于 2013-06-04T10:15:22.840 に答える
0

作成されたそれぞれに同じ id を与えていることがわかりますselect。これは HTML の規則に違反しています。要素の ID は一意でなければなりません。同じIDを持つ要素が複数ある場合、そのIDで選択すると、通常、最初に一致した要素が返されます(あなたの場合はselect最初の行にあります)。

この問題を回避するには、一意の番号を ID (など) に追加するか、最初にその内容で を作成しproductopt_1てから行に追加します。productopt_2select

$('#additems').click(function() {
   $.getJSON('Servlet1', function(json) {
      var row = $('<tr id="shipdetail" style="margin-top:20px;"></tr>');
      row.append($('<td><input  type="text" id="cptd"/></td>'));

      var select = $('<select class="productopt" tabindex="1"></select>');
      for (var i = 0; i < json.length; i++) {
         select.append($('<option>'+json[i].productName+'</option>'));
      }

      row.append($('<td></td>').append(select));

      // Append the rest of markup
   });
});
于 2013-06-04T10:11:22.680 に答える