私はAddMoreDrugsToBillingメソッドを使用して動的に選択ボックスを作成しています。また、selectboxのonclickイベントでshowDrugsを呼び出すことで、オプションを設定します。問題は、selectboxをselect2(検索可能なselectボックス)にすると、selectボックスのonclickイベントが呼び出されなくなり、値がselectボックスにロードされないということです。動的に作成されたselectboxをselect2として作成し、値を入力する方法は?select2とバインディング値を使用して動的に作成された選択ボックス
$(document).ready(function() {
debugger;
$(".selectDrugs").select2();
})
$(function() {
getDrugs();
AddMoreDrugsToBilling();
});
function AddMoreDrugsToBilling() {
//debugger;
if ($("#tbl_Drugs tbody").length > 0) {
$("<tr id=" + tblDrugsCount + "><td><select class='selectDrugs' width='250px' id='txt_Drugs" + (tblDrugsCount) + "' onchange='onChangeDrugText(this," + tblDrugsCount + ");' onclick='showDrugs(" + tblDrugsCount + ");' /></td><td><select id='txt_Batches" + (tblDrugsCount) + "' onchange='onChangeBatchText(this," + tblDrugsCount + ");' /></td><td><label id='lbl_ExpiryDate" + (tblDrugsCount) + "' /></td><td><label id='lbl_UnitPrice" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_AvlQty" + (tblDrugsCount) + "' type='text'/></td><td><input class='form-control input-100px' onkeyup='CheckMaxQuantity(" + (tblDrugsCount) + ");' id='txt_Qty" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_Amount" + (tblDrugsCount) + "' ></label></td><td><img src='../Images/delete.gif' id='img_delete" + (tblDrugsCount) + "' title='Delete' onclick='DeleteDrugItemrow(this);'/></td></tr>").appendTo("#tbl_Drugs tbody");
}
else {
$("<tbody><tr id=" + tblDrugsCount + "><td><select class='selectDrugs' width='250px' id='txt_Drugs" + (tblDrugsCount) + "' onchange='onChangeDrugText(this," + tblDrugsCount + ");' onclick='showDrugs(" + tblDrugsCount + ");' /></td><td><select id='txt_Batches" + (tblDrugsCount) + "' onchange='onChangeBatchText(this," + tblDrugsCount + ");' /></td><td><label id='lbl_ExpiryDate" + (tblDrugsCount) + "' /></td><td><label id='lbl_UnitPrice" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_AvlQty" + (tblDrugsCount) + "' type='text'/></td><td><input class='form-control input-100px' onkeyup='CheckMaxQuantity(" + (tblDrugsCount) + ");' id='txt_Qty" + (tblDrugsCount) + "' type='text'/></td><td><label id='lbl_Amount" + (tblDrugsCount) + "' ></label></td> <td><img src='../Images/delete.gif' id='img_delete" + (tblDrugsCount) + "' title='Delete' onclick='DeleteDrugItemrow(this);'/></td></tr></tbody>").appendTo("#tbl_Drugs");
}
tblDrugsCount++;
}
var drugsData = [];
function getDrugs() {
// debugger;
jQuery.ajax({
type: 'POST',
contentType: 'application/json;charset=utf-8',
data: {},
url: 'NewPharmacyOrder.aspx/FillDrugs',
success: function(data) {
//debugger;
var resultDrugItems = data.d;
for (i = 0; i < resultDrugItems.length; i++) {
var item1 = resultDrugItems[i];
drugsData.push({ "DrugName": item1.DrugName, "DrugId": item1.DrugId});
}
}
});
}
function showDrugs(id) {
debugger;
var txtDrugsList = $("#txt_Drugs" + id);
var txtDrugsListCtrl = document.getElementById("txt_Drugs" + id);
//alert(txtDrugsListCtrl.length);
if (txtDrugsListCtrl.length == 0) {
//if ($(txtDrugsList).length == 1) {
// if($("#txt_Drugs"+id) option).length)
txtDrugsList.empty();
$("#txt_Drugs" + id).get(0).options[0] = new Option("select drug", "-1");
$.each(drugsData, function(index, item) {
// debugger;
var option1 = new Option(item.DrugName, item.DrugId);
//option1.setAttribute('data-availablebatches', item.AvailableBatches);
txtDrugsList.append(option1);
});
// }
}
}