jQuery插件選擇在AJAX調用上不起作用

Question

我有兩個下拉菜單。 第一個包含移動網絡MTN，VODACOM，TELKOM，第二個是選定的多選下拉列表，其中應包含基於上述移動網絡通過AJAX填充的數據（單元號）。 但在AJAX調用后仍未觸發。

     <div id="network" class="form-group required">
      <label class="control-label">Mobile Network</label>
        <select class="form-control" id="network" name="network">  
         <option id="MTN" value="MTN">MTN</option>
         <option id="VODACOM" value="VODACOM">VODACOM</option>  
         <option id="TELKOM" value="TELKOM">TELKOM</option>       
       </select>
     </div>

第二個包含根據上面選擇的單元格編號。 下拉菜單使用選擇的插件

     <div id="cellNumber" class="form-group required">
      <label class="control-label">Select SIMs</label>
        <select multiple class="chosen-select form-control" id="cellNumber" name="cellNumber[]">
       </select>
     </div> 

在頁面上我這樣做

<script>   
  $("select.chosen-select").chosen(); //Initializing the plugin

     $('select#network').change(function () {
       var id = $('select#network').children(':selected').attr('id');

         if(id != " "){
          localStorage.clear();
           AJAXCallNumbersByCarrier(id);   //AJAX Call
          }
        });

</script>

這是AJAX

 function AJAXCallNumbersByCarrier(data) {
   var url = "/number/" + encodeURI(data) + "/carrier";
   var type = "GET";

   jQuery.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"').attr('content')
  }
});
jQuery.ajax({
url: url,
type: type,
data: {
  "_token": $('meta[name="csrf-token"').attr('content')
},
beforeSend: function () { },
success: function (data) {
  try {
    var count = data.length;
    if (count > 0) {
      var id = $('#cellNumber').attr('id');

      $('select#cellNumber').empty();

      var numbers = "<option value='' hidden=''>[Select SIMs]</option>";
      for (var index = 0; index < count; index++) {
        details = data[index];
        id = details['cellnumber'];
        cellnumber = details['cellnumber'];
        simserial = details['simserial'];
        realm = details['apnname'];
        numbers += '<option id="' + id + '" value="' + cellnumber + '">'+'[ '+ cellnumber + ' ] [ ' + simserial + ' ] [ ' + realm + ' ]' + '</option>';

      }
      $('select#cellNumber').append(numbers);
      $('div#cellNumber').show();
    }else{

      $('div#ErrorMessage').empty();
      $('div#ErrorMessage').append("No numbers available for the selected customer");
      $('div#ErrorMessage').show();
      $('div.alert').not('.alert-important').delay(3000).fadeOut(350);
      $('select#cellNumber').empty();
      $('select#cellNumber').append("<option value'' hidden=''>[No numbers available for the selected customer]</option>");
      $('div#cellNumber').show();
    }
  } catch (err) {
    alert("Error running JS code from module: AJAXCallNumbersByCarrier");
  }
},
error: function (url, jqXHR, textStatus, errorThrown) {
  alert("url: " + url + " error: " + jqXHR.responseText + " status: " + textStatus + " errorThrown: " + errorThrown);
},
complete: function () { }
});
   }

當我刪除$（“ select.chosen-select”）。chosen（）; 它可以正常用作HTML多選下拉菜單。 問題是選擇的。 它沒有開火。 數據為空。 請幫忙。

Answer 1

嘗試重新初始化成功函數中的所選內容，例如

success:function(data){
   // your code here
   $('select#cellNumber').append(numbers);
   $("select.chosen-select").chosen(); 
   $('div#cellNumber').show();
}

一旦我遇到同樣的問題，它就解決了。 希望這可以幫助。

Answer 2

我改用Select2。 效果很好。