向动态生成的选择标签添加选项

Question

我在使用

jQuery 动态生成的 select 中添加选项时遇到问题。我正在从数据库中获取选项，我想显示每个动态生成的

select

标签的所有这些选项。

请告诉我我的代码中做错了什么？

这是我添加新行的函数：

function addnewrow() {
    var n = ($('.detail tr').length - 0) + 1;
    var tr = '<tr>' +
        '<td class="no">' + n + '</td>' +
        '<td><input type="checkbox" class="till_check" name="till_check[' + till_check_counter + ']" id="prdct_till_check[' + till_check_counter + ']"></td>' +
        '<td><select class="form-control barcode  dyselect['+product_barcode_counter+']" name="barcode[' + product_barcode_counter + ']" id="prdct_barcode[' + product_barcode_counter + ']">'+'<option>Please select a bar code</option>'+'</select></td>' +
        '<td><input type="text" class="form-control productname"  id="brcode_product"  name="productname[' + product_name_counter + ']" id="prdct_name[' + product_name_counter + ']"></td>' +
        '<td><input type="text" class="form-control sm" name="sm[' + sm_counter + ']" id="prdct_sm[' + sm_counter + ']"></td>' +
        '<td><input type="text" class="form-control spl" name="spl[' + spl_counter + ']" id="prdct_spl[' + spl_counter + ']"></td>' +
        '<td><input type="text" class="form-control quantity" name="quantity[' + product_quantity_counter + ']" id="prdct_qty[' + product_quantity_counter + ']"></td>' +
        '<td><input type="text" class="form-control price" name="price[' + product_price_counter + ']" id="prdct_price[' + product_price_counter + ']"></td>' +
        '<td><input type="text" class="form-control discount" name="discount[' + product_discount_counter + ']" id="prdct_discount[' + product_discount_counter + ']"></td>' +
        '<td><input type="text" class="form-control amount" name="amount[' + product_amount_counter + ']" id="prdct_amount[' + product_amount_counter + ']"></td>' +
        '<td><a href="#" class="remove">Delete</td>' +
        '</tr>';
    $('.detail').append(tr);

    //incrementing the counter
    ++till_check_counter;
    ++product_name_counter;
    ++product_quantity_counter;
    ++sm_counter;
    ++spl_counter;
    ++product_price_counter;
    ++product_discount_counter;
    ++product_amount_counter;

    //setting the validation rules for every product attribute by calling the function 
    createValidation();
    get_barcodes();
}

这是从数据库获取条形码的功能：

function get_barcodes() {
  $.ajax({
    url: 'http://localhost/retail/main/ajax_barcodes/',
    type: 'POST',
    datatype: 'json',
    data: {
      'barcode': $('#brcode option:selected').val()
    },
    success: function(data) {
      /*var obj = JSON.parse(data);
      console.log(obj.brcode.name);*/
      var myselect = $('.dyselect[' + product_barcode_counter + ']');
      var barcodes = JSON.parse(data);

      for (var i = 0; i < barcodes.brcode.length; i++) {
        //console.log(barcodes.brcode[i].name);
        //console.log(barcodes.brcode[i].barcode);

        var options = ('<option value="' + barcodes.brcode[i].barcode + '">' + barcodes.brcode[i].barcode + '</option>');
        console.log(options);
        // $('.dyselect['+product_barcode_counter+']').append("Hello world");

        $('.dyselect').text('dfsgfisdgfsiudfgsdf');
      }
    }
  });
}

请不要考虑注释的代码。

Answer 1

您没有将选项附加到 DOM 的任何地方。

myselect.append(options); // Missing this line

添加一行后，您将增加

++product_barcode_counter

//incrementing the counter
++till_check_counter;
++product_name_counter;
++product_quantity_counter;
++sm_counter;
++spl_counter;
++product_price_counter;
++product_discount_counter;
++product_amount_counter;

所以，当您访问ajax成功中的

product_barcode_counter

时，它会递增。

在这里，你的

var myselect = $('.dyselect_' + product_barcode_counter);

选择错误，没有返回任何内容。

您必须将您的 id 绑定到 ajax，以便您可以在 ajax 成功时读取值。

$.ajax({
        url: 'http://localhost/retail/main/ajax_barcodes/',
        type: 'POST',
        datatype: 'json',
        data: {
          'barcode': $('#brcode option:selected').val()
        },
        success: function(id,data) {
          //Here id is what you need to use to select the correct select.

       }.bind(this,product_name_counter-1)
 );

JS

function get_barcodes() {

  $.ajax({
    url: 'http://localhost/retail/main/ajax_barcodes/',
    type: 'POST',
    datatype: 'json',
    data: {
      'barcode': $('#brcode option:selected').val()
    },
    success: function(id,data) {
      var myselect = $('.dyselect_' + id);
      var barcodes = JSON.parse(data);


      for (var i = 0; i < barcodes.brcode.length; i++) {


        var options = ('<option value="' + barcodes.brcode[i].barcode + '">' + barcodes.brcode[i].barcode + '</option>');

        myselect.append(options); // Missing this line


      }


    }.bind(this,product_name_counter-1)
  });


}

或者你可以使用闭包

success: (function(id){
     return function(data) {
          //Here id is what you need to use to select the correct select.
            }
 })(product_name_counter-1);

JS

function get_barcodes() {

  $.ajax({
    url: 'http://localhost/retail/main/ajax_barcodes/',
    type: 'POST',
    datatype: 'json',
    data: {
      'barcode': $('#brcode option:selected').val()
    },
    success: (function(id){
                 return function(data) {
                     var myselect = $('.dyselect_' + id);
                     var barcodes = JSON.parse(data);
                     for (var i = 0; i < barcodes.brcode.length; i++) {
                     var options = ('<option value="' + barcodes.brcode[i].barcode + '">' + barcodes.brcode[i].barcode + '</option>');

                     myselect.append(options); // Missing this line
                     }
                   }
               }
           })(product_name_counter-1);

     });
}