ajax載入資料後,bootstrap-select下拉無反應
阿新 • • 發佈:2019-01-28
js程式碼:
<script type="text/javascript" src="${ctx }/js/jquery.js"></script> <link href="${ctx }/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ctx }/js/bootstrap.min.js"></script> <!-- bootstrap-select下拉列表 --> <link href="${ctx }/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" /> <script src="${ctx }/bootstrap-select/js/bootstrap-select.min.js"></script>
ajax程式碼:
$.ajax({ type : "post", url : "${ctx}/frontPage/ajaxLoadTreatment.action", dataType : "json",//指定返回的資料 json格式字元竄 success : function(msg) { var treatment = msg.treatment; $.each(treatment,function(){ $("#select").append("<option value='"+this.treat_Id+"'>"+this.name+"</option>"); }); }, error : function() { $.message({message : "資料載入異常!", type : "error"}); } });
html程式碼:
<select id="select" name="expert.treat.treat_Id" class="selectpicker">
問題:在引入相關css和js後,ajax載入資料後,點選select無反應
解決辦法:
在ajax中新增程式碼:
$("#select").selectpicker("refresh");
$("#select").selectpicker("render");
$.ajax({ type : "post", url : "${ctx}/frontPage/ajaxLoadTreatment.action", dataType : "json",//指定返回的資料 json格式字元竄 success : function(msg) { var treatment = msg.treatment; $.each(treatment,function(){ $("#select").append("<option value='"+this.treat_Id+"'>"+this.name+ "</option>"); }); // 缺一不可 $("#select").selectpicker("refresh"); $("#select").selectpicker("render"); }, error : function() { $.message({message : "資料載入異常!", type : "error"}); } });
原因:js和css載入完後才再載入ajax,此時會導致select中無資料,所以在ajax載入資料之後重新整理樣式。
另外的錯誤:可能是css衝突。
或漏加東西:
<script type="text/javascript" src="${ctx }/js/bootstrap.min.js"></script>