Jquery 插件选择在 AJAX 调用上不起作用答案

【问题标题】：Jquery plugin Chosen not working on AJAX CallJquery 插件选择在 AJAX 调用上不起作用
【发布时间】：2018-10-15 08:13:49
【问题描述】：

我有两个下拉菜单。第一个包含移动网络 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 多选下拉菜单正常工作。问题是选择的。它不是开火。数据为空。请帮忙。

【问题讨论】：

标签： php jquery ajax laravel jquery-chosen

【解决方案1】：

尝试重新初始化成功函数中选择的

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

一旦我遇到同样的问题，它就解决了。希望这会有所帮助。

【讨论】：

【解决方案2】：

我改用 Select2。效果很好。

【讨论】：