我在使用 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);
//increamenting 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');
}
}
});
}
请不要考虑评论代码。
答案 0 :(得分:0)
您不会在任何地方将选项附加到DOM。
myselect.append(options); // Missing this line
添加行后,您正在递增++product_barcode_counter
//increamenting 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);
});
}