下载地址:[https://www.bootstrapselect.cn/]
jar包路径:
引入jar包:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css"/>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-select.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/defaults-zh_CN.js" type="text/javascript" charset="utf-8"></script>
其中defaults-zh_CN.js为汉化包
代码示例 html:
<body>
<select id="selectTest" class="selectpicker" data-live-search="true">
<option value="" selected="selected">--请选择--</option>
<option >123</option>
<option >qwe</option>
<option >wre</option>
<option >ert</option>
<option >tyu</option>
<option >uio</option>
</select>
</body>
标签id自定义, class为插件样式selectpicker 本人用的是模糊查询的下拉框功能 所以需要加上: data-live-search=“true”;
页面示例:
模糊搜索示例:
重置方法:
$(".selectpicker").selectpicker("val","Mustard");
结果示例:
以上提示为插件自动提供
$(".selectpicker").selectpicker("val", "");
结果示例:
以上为自定义结果 第一个选项option中设置value=“”
导致
因为用到了记录了下基本入门方式,详细方法可以看文章第一行网址看示例