如何處理 JavaScript 中動態表行的自動填充下拉列表？
[英]How to handle auto-populate dropdown for dynamic table row in JavaScript?
問題描述
我正在添加動態表行。 當用戶單擊該按鈕時，有一個用於添加表格行的按鈕。 所以我有三個下拉菜單。 每個下拉菜單都有一些 ID。 所以我已經實現了我試圖在該按鈕單擊時自動填充第一個下拉列表的東西。 所以我點擊添加更多行，然后為第二行創建空下拉列表。
我希望每當用戶點擊添加更多行時，每個行的下拉列表都應該自動填充。 我希望我的話很清楚。
下面是在下拉列表中加載數據並動態創建行的腳本：
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
div.html(GetDynamicTextBox(""));
$("#TextBoxContainer").append(div);
var url = "api/get/activecompany";
$.post(url, {
}, function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1) {
var list = data.response;
var option = "<option selected disabled>Select Company</option>";
if(list.length > 0){
for(var i = 0; i < list.length; i++){
var content = "<option value='"+list[i].companyid+"'>"+list[i].companyname+" <span>("+list[i].dotnumber+")</span></option>";
option = option + content;
}
}
document.getElementById('lcompanyselect').innerHTML = option;
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
function GetDynamicTextBox(value) {
return '<td class="">'+'<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_co"></td>'
+'<td><select class="js-example-placeholder-single js-states form-control" id="ldriverselect"></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_driver"></td>'
+'<td class=""><select class="js-example-placeholder-single js-states form-control" id="ltruckselect"></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_truck"></td>'
+ '<td><input name = "tripnumber" type="text" class="form-control" id="ltripnumber"/></td>'
+'<td><select id="lsubtrip" name="subtrip" class="js-example-placeholder-single js-states form-control"><option disabled selected></option>'
+'<option value="1">1</option><option value="2">2</option><option value="3">3</option></select>'
+ '<td><input name = "date" type="date" class="form-control" id="ldate"/></td>'
+ '<td><input name = "pickupcity" type="date" class="form-control" id="lpickupcity"/></td>'
+ '<td><input name = "pickupstate" type="date" class="form-control" id="lpickupstate"/></td>'
+ '<td><input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/></td>'
+ '<td><input name = "delivercity" type="text" class="form-control" id="ldelivercity"/></td>'
+ '<td><input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/></td>'
+ '<td><input name = "loadnumber" type="text" class="form-control" id="lloadnumber"/></td>'
+ '<td><input name = "loadrate" type="text" class="form-control" id="lloadrate" onkeyup="lcount();"/><span id="lerrormessage"></span></td>'
+ '<td><input name = "dispatchfee" type="text" class="form-control" id="ldispatchfee" readonly/></td>'
+ '<td><input name = "fuel" type="text" class="form-control" id="lfuel"/></td>'
+ '<td><input name = "cardfee" type="text" class="form-control" id="lcardfee"/></td>'
+ '<td><input name = "onloadrepair" type="text" class="form-control" id="lonloadrepair"/></td>'
+ '<td><input name = "shoprepair" type="text" class="form-control" id="lshoprepair"/></td>'
+ '<td><input name = "trailerrent" type="text" class="form-control" id="ltrailerrent"/></td>'
+ '<td><input name = "comcheck" type="text" class="form-control" id="lcomcheck"/></td>'
+ '<td><input name = "advance" type="text" class="form-control" id="ladvance"/></td>'
+ '<td><input name = "miscellenous" type="text" class="form-control" id="lmiscellenous"/></td>'
+ '<td><input name = "misc1" type="text" class="form-control" id="lmisc1"/></td>'
+ '<td><input name = "misc2" type="text" class="form-control" id="lmisc2"/></td>'
+ '<td><input name = "misc3" type="text" class="form-control" id="lmisc3"/></td>'
+ '<td><input name = "misc4" type="text" class="form-control" id="lmisc4"/></td>'
+ '<td><input name = "total" type="text" class="form-control" id="ltotal" readonly/></td>'
+ '<td><input name = "layover" type="text" class="form-control" id="llayover"/></td>'
+ '<td><input name = "addtl1" type="text" class="form-control" id="laddtl1"/></td>'
+ '<td><input name = "addtl2" type="text" class="form-control" id="laddtl2"/></td>'
+ '<td><input name = "addtl3" type="text" class="form-control" id="laddtl3"/></td>'
+ '<td><input name = "subtotal" type="text" class="form-control" id="lsubtotal" readonly/></td>'
+ '<td><input name = "paymentmode" type="text" class="form-control" id="lpaymentmode"/></td>'
+ '<td><input name = "pay" type="text" class="form-control" id="lpay"/></td>'
+ '<td><input name = "notes" type="text" class="form-control" id="lnotes"/></td>'
+ '<td><input name = "grandtotal" type="text" class="form-control" id="lgrandtotal" readonly/></td>'
+ '<td><button type="button" class="btn btn-outline-info text-info" onclick="savetriplist();">Submit</button>'
+'<button type="button" class="btn btn-outline-danger text-danger remove">Remove</button></td>'
}
1 個解決方案
解決方案1
0 2021-12-07 12:10:59
我在您的代碼中觀察到的一件事是，它尋找一個 id 為 lcompanyselect 的下拉菜單，然后用選項填充它。 當代碼第一次運行時，它會在 dom 上添加下拉列表，但是當代碼第二次運行時（單擊添加按鈕時），它會填充之前添加的相同下拉列表，因為代碼正在尋找 id 為 lcompanyselect 的元素它找到了一個。
document.getElementById('lcompanyselect').innerHTML = option;
相反，我建議在您的 function 中有一個下拉占位符
GetDynamicTextBox(value)
<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";>{Placeholder}</select>
在代碼中，當您找到元素時，將 {placeholder} 替換為選項 html。 這就是修改后的代碼的樣子。
$(function() {
$("#btnAdd").bind("click", function() {
var div = $("<tr />");
var dynamicTextboxHtml = div.html(GetDynamicTextBox(""));
var url = "api/get/activecompany";
$.post(url, {
}, function(data, status) {
if (data.status == "OK") {
if (data.statusCode == 1) {
var list = data.response;
var option = "<option selected disabled>Select Company</option>";
if(list.length > 0){
for(var i = 0; i < list.length; i++){
var content = "<option value='"+list[i].companyid+"'>"+list[i].companyname+" <span>("+list[i].dotnumber+")</span></option>";
option = option + content;
}
}
dynamicTextboxHtml.replace("{OptionsPlaceholder}",content);
$("#TextBoxContainer").append(dynamicTextboxHtml);
dynamicTextboxHtml = '';
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
} else {
var error = data.responseMessage;
swal(error, "", "error");
}
});
});
$("body").on("click", ".remove", function() {
$(this).closest("tr").remove();
});
});
function GetDynamicTextBox(value) {
return '<td class="">'+'<select class="js-example-placeholder-single js-states form-control" id="lcompanyselect" onchange="getDriverAndTruck()";>{OptionsPlaceholder}</select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_co"></td>'
+'<td><select class="js-example-placeholder-single js-states form-control" id="ldriverselect"></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_driver"></td>'
+'<td class=""><select class="js-example-placeholder-single js-states form-control" id="ltruckselect"></select>'
+'<input type="button" value="+" class="qty-plus" data-toggle="modal" data-target="#edit_truck"></td>'
+ '<td><input name = "tripnumber" type="text" class="form-control" id="ltripnumber"/></td>'
+'<td><select id="lsubtrip" name="subtrip" class="js-example-placeholder-single js-states form-control"><option disabled selected></option>'
+'<option value="1">1</option><option value="2">2</option><option value="3">3</option></select>'
+ '<td><input name = "date" type="date" class="form-control" id="ldate"/></td>'
+ '<td><input name = "pickupcity" type="date" class="form-control" id="lpickupcity"/></td>'
+ '<td><input name = "pickupstate" type="date" class="form-control" id="lpickupstate"/></td>'
+ '<td><input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/></td>'
+ '<td><input name = "delivercity" type="text" class="form-control" id="ldelivercity"/></td>'
+ '<td><input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/></td>'
+ '<td><input name = "loadnumber" type="text" class="form-control" id="lloadnumber"/></td>'
+ '<td><input name = "loadrate" type="text" class="form-control" id="lloadrate" onkeyup="lcount();"/><span id="lerrormessage"></span></td>'
+ '<td><input name = "dispatchfee" type="text" class="form-control" id="ldispatchfee" readonly/></td>'
+ '<td><input name = "fuel" type="text" class="form-control" id="lfuel"/></td>'
+ '<td><input name = "cardfee" type="text" class="form-control" id="lcardfee"/></td>'
+ '<td><input name = "onloadrepair" type="text" class="form-control" id="lonloadrepair"/></td>'
+ '<td><input name = "shoprepair" type="text" class="form-control" id="lshoprepair"/></td>'
+ '<td><input name = "trailerrent" type="text" class="form-control" id="ltrailerrent"/></td>'
+ '<td><input name = "comcheck" type="text" class="form-control" id="lcomcheck"/></td>'
+ '<td><input name = "advance" type="text" class="form-control" id="ladvance"/></td>'
+ '<td><input name = "miscellenous" type="text" class="form-control" id="lmiscellenous"/></td>'
+ '<td><input name = "misc1" type="text" class="form-control" id="lmisc1"/></td>'
+ '<td><input name = "misc2" type="text" class="form-control" id="lmisc2"/></td>'
+ '<td><input name = "misc3" type="text" class="form-control" id="lmisc3"/></td>'
+ '<td><input name = "misc4" type="text" class="form-control" id="lmisc4"/></td>'
+ '<td><input name = "total" type="text" class="form-control" id="ltotal" readonly/></td>'
+ '<td><input name = "layover" type="text" class="form-control" id="llayover"/></td>'
+ '<td><input name = "addtl1" type="text" class="form-control" id="laddtl1"/></td>'
+ '<td><input name = "addtl2" type="text" class="form-control" id="laddtl2"/></td>'
+ '<td><input name = "addtl3" type="text" class="form-control" id="laddtl3"/></td>'
+ '<td><input name = "subtotal" type="text" class="form-control" id="lsubtotal" readonly/></td>'
+ '<td><input name = "paymentmode" type="text" class="form-control" id="lpaymentmode"/></td>'
+ '<td><input name = "pay" type="text" class="form-control" id="lpay"/></td>'
+ '<td><input name = "notes" type="text" class="form-control" id="lnotes"/></td>'
+ '<td><input name = "grandtotal" type="text" class="form-control" id="lgrandtotal" readonly/></td>'
+ '<td><button type="button" class="btn btn-outline-info text-info" onclick="savetriplist();">Submit</button>'
+'<button type="button" class="btn btn-outline-danger text-danger remove">Remove</button></td>'
}
如何使用 JavaScript 和 AJAX 根據郵政編碼自動填充城市和 state？
[英]How do I auto-populate city and state based on zip-code with JavaScript and AJAX?
如何使用Javascript從URL參數自動填充文本字段
[英]How do I auto-populate a text field from URL Parameter using Javascript
嘗試使用 JavaScript 自動填充模型字段但它不起作用
[英]Trying to auto-populate a model field using JavaScript and it does not work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.