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。效果很好。

选择了Jquery插件无法使用AJAX呼叫

2 个答案: