使用 select2 并将值绑定到动态创建的 select 框

Question

我正在使用 AddMoreDrugsToBilling 方法动态创建 select 框。并通过在 select 框的 onclick 事件中调用 showDrugs 来用选项填充它。问题是，当我将 select 框设置为 select2（可搜索 select 框）时，不再调用 select 框的 onclick 事件，因此值为没有加载到 select 框。如何将动态创建的 select 框设为 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 = 代码继续。（没有任何暂停。其他代码是 not waiting。）

就这么简单。

因此，为了确保数据已加载，您只需将函数调用 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);
    });
    // }
  }
}

使用 select2 并将值绑定到动态创建的 select 框

Using select2 and binding values to dynamically created select boxes

javascript

jquery

jquery-select2

select2