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

hjqgdpho 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(125)

我在使用 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');
      }
    }
  });
}

型
请不要考虑注解代码。

jquery

来源：https://stackoverflow.com/questions/44301374/adding-options-to-dynamically-generated-select-tag

1条答案

按热度按时间

3mpgtkmj1#

你没有在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;

型
所以，当你在访问product_barcode_counter的时候，它的成功是递增的。
这里你的

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

型
选择错误，它不返回任何内容。
你必须将你的id绑定到aplog上，这样你就可以读取aplog成功的值。

$.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);

     });
}

型

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答