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

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

为避免此问题，您可以将唯一编号附加到 id (productopt_1等productopt_2) 或先创建 aselect及其内容，然后将其附加到行：

$('#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 回答
0

我认为问题在于您正在为 productopt 的选择元素创建一个具有特定 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 回答