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

Question

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

    }

Answer 1

试试这个;)

您认为getDrugs(); 调用将提取数据，然后控制将转到AddMoreDrugsToBilling();，但这是没有发生的，因为您在这里发出异步发送的 ajax 请求。

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

就这么简单。

因此，为了确保数据已加载，您只需将函数调用 AddMoreDrugsToBilling(); 移动到 success 回调，而不是在 getDrugs(); 之后调用它

以下是更新后的代码：

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