Javascript 使用select2和绑定值动态创建选择框

我使用AddMoreDrugsToBilling方法动态创建选择框。并通过在selectbox的onclick事件中调用showDrugs来填充选项。问题是，当我将selectbox设置为select2（可搜索的选择框）时，选择框的onclick事件不再被调用，因此值不会加载到选择框中。如何将动态创建的SelectBox设置为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);
            });
            // }
        }

    }

$（文档）.ready（函数（）{
调试器；
$（“.selectDrugs”）.select2（）；
})
$（函数（）{
获取药物（）；
AddMoreDrugsToBilling（）；
});
函数AddMoreDrugsToBilling（）{
//调试器；
如果（$（“#待定”）。长度>0）{
$（“”）。附于（“#tbl#u药物体”）；
}
否则{
$（“”）。附于（“#tbl_药物”）；
}               
tbldrugsunt++；
}
var drugsData=[]；
功能（药物）{
//调试器；
jQuery.ajax({
键入：“POST”，
contentType:'application/json；charset=utf-8'，
数据：{}，
url:'NewPharmacyOrder.aspx/FillDrugs'，
成功：功能（数据）{
//调试器；
var resultDrugItems=data.d；
对于（i=0；i

试试这个；）

您认为

getDruges（）调用将提取数据，然后控制将转到
AddMoreDrugsToBilling（）这不会发生，因为您正在发出异步发送的ajax请求


Async:False
=代码暂停。（其他代码正在等待此操作完成…）
Async:True
=代码续。（没有任何代码暂停。其他代码未等待）

就这么简单

因此，为了确保加载了数据，只需移动函数调用
AddMoreDrugsToBilling（）
调用
success
回调，而不是在
getDruges（）之后调用它

更新代码如下：

$(function(){
  debugger;
  $(".selectDrugs").select2();
  getDrugs();  
});

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});
      }
      AddMoreDrugsToBilling(); /* here you can call this to appened data */
    }
  });
}

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);
    });
    // }
  }
}

$（函数（）{
调试器；
$（“.selectDrugs”）.select2（）；
获取药物（）；
});
函数AddMoreDrugsToBilling（）{
//调试器；
如果（$（“#待定”）。长度>0）{
$（“”）。附于（“#tbl#u药物体”）；
}否则{
$（“”）。附于（“#tbl_药物”）；
}
tbldrugsunt++；
}
var drugsData=[]；
功能（药物）{
//调试器；
jQuery.ajax({
键入：“POST”，
contentType:'application/json；charset=utf-8'，
数据：{}，
url:'NewPharmacyOrder.aspx/FillDrugs'，
成功：功能（数据）{
//调试器；
var resultDrugItems=data.d；
对于（i=0；i