这里总结一下上次使用bootstrap-select的过程中遇到的一些问题。至于bootstrap-select的具体使用方法这里就不介绍了,网上有很多例子。
地址:
官方插件地址:
github地址:
原因:可能是js文件引入顺序错误。
正确引入顺序:
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="lib/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" /> <script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script> <script src="lib/bootstrap/js/bootstrap.min.js"></script> <script src="lib/bootstrap-select/js/bootstrap-select.js"></script>
方法一:
$.get("/test/ajax", function(result){ if(result.code == 0){ var addhtml = ""; for (var i = 0; i < result.data.length; i++){ addhtml += "<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>"; } $('.selectpicker').html(addhtml); } });
方法二:
$.get("/test/ajax", function(result){ if(result.code == 0){ for (var i = 0; i < result.data.length; i++){ $('.selectpicker').append("<option value="+ result.data[i]['id'] +">"+ result.data[i]['name'] +"</option>"); } } });
原因:动态生成数据后没有刷新插件
解决办法:数据加载成功后加入以下两条语句。
//使用refresh方法更新ui以匹配新状态 $('.selectpicker').selectpicker('refresh'); //render方法强制重新渲染引导程序 $('.selectpicker').selectpicker('render');
解决办法:
注释bootstrap-select.js文件中的以下代码:
that.$lis.not('.hidden, .divider, .dropdown-header').eq(0).addclass('active').children('a').focus(); $(this).focus();
如对本文有疑问, 点击进行留言回复!!
web前端基础之HTML5语义化新标签学习笔记(8)学会用语义化标签
网友评论