bootstrap-select入门

下载地址:[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=“”
导致

因为用到了记录了下基本入门方式,详细方法可以看文章第一行网址看示例

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值