Question

我必须通过点击购物车中的添加按钮添加新行。该行包含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");

    });
});

Answer 1

我可以看到您为每个创建的select提供相同的ID。这违反了HTML约定 - 元素的id必须是唯一的。如果有多个具有相同id的元素，则通过该id选择通常会返回第一个匹配的元素（在您的情况下是第一行中的select）。

要避免此问题，您可以在ID（productopt_1，productopt_2等）中添加唯一编号，或者先创建一个select的内容，然后将其附加到该行：

$('#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
   });
});

Answer 2

我认为问题在于您正在为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);
}

动态地将值添加到新创建的下拉列表而不是先前创建的

2 个答案: