下拉列表插件bootstrap-select使用实例

网页实例 http://www.jq22.com/yanshi302

使用bootstrap-select插件来实现下来菜单搜索匹配功能，如图

实现代码如下

<html><head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-select.min.css"><script src="jquery-3.1.0.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><script src="js/bootstrap-select.min.js"></script></head><body><form class="form-inline"><div class="form-group"><label class="col-md-1 control-label" for="lunch">Lunch:</label></div><div class="form-group"><select id="lunch" class="selectpicker" data-live-search="true" title="Please select a lunch ..."><option>Hot Dog, Fries and a Soda</option><option>Burger, Shake and a Smile</option><option>Sugar, Spice and all things nice</option><option>中国</option><option>美国</option><option>日本</option><option>Baby Back Ribs</option><option>A really really long option made to illustrate an issue with the live search in an inline form</option></select></div></form></body>
</html>

步骤：

1.导入相关的js和css文件，可自行下载

bootstrap-select：http://silviomoreto.github.io/bootstrap-select/

bootstrap:http://v3.bootcss.com/

JQuery:http://jquery.com/

2.设置<select></select>的属性

class="selectpicker" data-live-search="true"

转载于:https://www.cnblogs.com/LeoBoy/p/5826531.html

下拉列表插件bootstrap-select使用实例相关推荐

bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
Select-or-Die：灵活的 jQuery 下拉列表插件
Select-or-Die 是一个 jQuery 插件,用来自定义下拉列表(Select)元素.原生的下拉选择元素在各个浏览器的默认样式差异很多,而且自定义样式很困难,因此 Web 开发人员喜欢使用插 ...
Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
bootstrap select多选的change事件
bootstrap select的插件多选会自己生成新的DOM,所以绑定在原来select上的change事件不会触发. //bootstrap select插件多选的change事件 $('#fc_ ...
bootstrap select下拉框模糊搜索和动态绑定数据解决方法
bootstrap select下拉框模糊搜索和动态绑定数据解决方法参考文章: (1)bootstrap select下拉框模糊搜索和动态绑定数据解决方法 (2)https://www.cnblog ...
Selenium系列教程 - 下拉列表处理（select标签、非select标签）
主要内容 1.下拉列表类型 2. Select 下拉列表处理 2.1. Select 方法列表 2.2. Select 示例代码 3. 非 Select 下拉列表处理 1.下拉列表类型下拉列表的类型 ...
创建jira plugin插件、创建jira实例生成jar包总结
创建jira plugin插件.创建jira实例生成jar包总结创建插件骨架: 在本地安装完Atlassian SDK后,需注意将环境变量里的maven路径更改为sdk里自带的maven仓库路径. ...
html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
Bootstrap select 多选并获取选中的值
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票效果图: 输出日志代码: <!DOCTYPE html> <html><h ...

下拉列表插件bootstrap-select使用实例

下拉列表插件bootstrap-select使用实例相关推荐

最新文章

热门文章