前端组件：支持多选，支持选项筛选的下拉框选择器（基于Jquery和Bootstrap）
效果图一：多选
效果图二：选项筛选
最后奉献源码，复制出来直接可用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>支持搜索选项和多选的下拉框</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.dropdown-menu {
overflow-x: visible;
overflow-y: auto;
max-height: 300px;
}
</style>
<body>
<ul class="nav navbar-nav" >
<li class="dropdown" >
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<b>位置:</b> 
<label id="selectPosition">选择</label><span class="caret"></span>
</a>
<ul id="select_item" class="dropdown-menu" > </ul>
</li>
</ul>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
//设置搜索选项功能
var all_content = ['上面','aaa','cvb','dgf','gdf','dffh','erte','fdg','fghfg','erte','sdfs','gftjhgj']//选项
var select_item_obj = $("#select_item")//下拉框对象
select_item_obj.empty()
select_item_obj.append('<input id="input_search" class="select_search" type="text" class="input-sm" placeholder="搜索">')
for (let j = 0; j < all_content.length; j++) {
select_item_obj.append("<li class='select_item'><a href='#'>" + all_content[j] + "  <span class='glyphicon glyphicon-ok hidden' ></span></a></li>")
}
var input_search_obj = $("#input_search")//搜索框对象
//设置下拉框筛选事件
input_search_obj.on("propertychange input ", function () {
let search_msg = $(this).val()
select_item_obj.children('.select_item').each(function () {
$(this).remove()
})
if (search_msg != '') {
let select_content = []
for (let j = 0; j < all_content.length; j++) {
if (all_content[j].toLowerCase().indexOf(search_msg.toLowerCase()) >= 0) {
select_content.push(all_content[j])
}
}
console.log(select_content)
for (let j = 0; j < select_content.length; j++) {
select_item_obj.append("<li class='select_item'><a href='#'>" + select_content[j] + "  <span class='glyphicon glyphicon-ok hidden' ></span></a></li>")
}
} else {
for (let j = 0; j < all_content.length; j++) {
select_item_obj.append("<li class='select_item'><a href='#'>" + all_content[j] + "  <span class='glyphicon glyphicon-ok hidden' ></span></a></li>")
}
}
//将下拉框的值设置为显示的值，由于下拉框处于动态变化，所以必须放在变化最后的位置，才能保证全部的下拉框绑定事件
$('ul.dropdown-menu li.select_item').on('click', function (e) {
var ul_obj = $(this).parent()
var glyphicon_obj = $(this).children('a').children('span')
var glyphicon_class = glyphicon_obj.attr('class')
if (glyphicon_class == 'glyphicon glyphicon-ok') {
glyphicon_obj.attr('class', 'glyphicon glyphicon-ok hidden')
} else {
glyphicon_obj.attr('class', 'glyphicon glyphicon-ok')
}
var label_val = ''
ul_obj.find('li').each(function () {
var select_falg = $(this).children('a').children('span')
var now_obj = $(this)
if (select_falg.attr('class') == 'glyphicon glyphicon-ok') {
label_val += $.trim(now_obj.text()) + ','
}
})
console.log(label_val)
if (label_val == '') {
label_val = '选择'
}
$(this).parent().prev().children('label').text($.trim(label_val))
$(this).parent().prev().children('label').val($.trim(label_val))
e.stopPropagation();
})
})
//将下拉框的值设置为显示的值，由于下拉框处于动态变化，所以必须放在变化最后的位置，才能保证全部的下拉框绑定事件
$('ul.dropdown-menu li.select_item').on('click', function (e) {
var ul_obj = $(this).parent()
var glyphicon_obj = $(this).children('a').children('span')
var glyphicon_class = glyphicon_obj.attr('class')
if(glyphicon_class=='glyphicon glyphicon-ok'){
glyphicon_obj.attr('class','glyphicon glyphicon-ok hidden') }else{
glyphicon_obj.attr('class','glyphicon glyphicon-ok')
}
var label_val = ''
ul_obj.find('li').each(function () {
var select_falg = $(this).children('a').children('span')
var now_obj = $(this)
if(select_falg.attr('class')=='glyphicon glyphicon-ok'){
label_val += $.trim(now_obj.text())+','
}
})
console.log(label_val)
if(label_val==''){label_val='选择'}
$(this).parent().prev().children('label').text($.trim(label_val))
$(this).parent().prev().children('label').val($.trim(label_val))
e.stopPropagation();
})
//阻断li的点击事件
$(".select_search").on('click', function (e) {
e.stopPropagation();
});
</script>
</html>
前端组件：支持多选，支持选项筛选的下拉框选择器（基于Jquery和Bootstrap）的更多相关文章
- 前端 HTML form表单标签 select标签 option 下拉框
<select></select> select里面通常跟option配合使用 <!DOCTYPE html> <html lang="en&quo ...
- 使用jquery-combobox实现select下拉框多选之后，如何将下拉框的值传给input隐藏域
我在之前的一篇博文中eaeyui-combobox实现组合查询(即实现多个值得搜索)地址:http://www.cnblogs.com/dushan/p/4778897.html 实现了select下 ...
- 自绘制HT For Web ComboBox下拉框组件
传统的HTML5的下拉框select只能实现简单的文字下拉列表,而HTforWeb通用组件中ComboBox不仅能够实现传统HTML5下拉框效果,而且可以在文本框和下拉列表中添加自定义的小图标,让整个 ...
- 由于抽签HT For Web ComboBox下拉框组件
传统HTML5的下拉框select仅仅能实现简单的文字下拉列表,而HT for Web通用组件中ComboBox不仅可以实现传统HTML5下拉框效果,并且可以在文本框和下拉列表中加入自己定义的小图标, ...
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
- MVC身份验证.MVC过滤器.MVC6关键字Task,Async.前端模拟表单验证,提交.自定义匿名集合.Edge导出到Excel.BootstrapTree树状菜单的全选和反选.bootstrap可搜索可多选可全选下拉框
1.MVC身份验证. 有两种方式.一个是传统的所有控制器继承自定义Control,然后再里面用MVC的过滤器拦截.所以每次网站的后台被访问时.就会先走入拦截器.进行前端和后端的验证 一个是利用(MVC ...
- MVC实现多选下拉框,保存并显示多选项
在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...
- Android学习使用基本界面组件（下拉框，单选框，复选框，数字转轮，滚动条）
(一)建立单选框按钮 RadioGroup和RadioButton建立单选框按钮 字符串资源文件: <resources> <string name="app_name&q ...
- jq插件又来了，模拟select下拉框，支持上下方向键哦
好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...
随机推荐
- DeepinV20系统文件管理器右键发送至为知笔记
1. 创作背景 昨天在深度系统上做了一个打开文件管理器选择文件右键发送文本至博客园的插件. 这个插件对于我自己来说是及其方便的东西,平时的学习积累,工作经验或者生活感悟,随手记下之后,就能够轻松发送出 ...
- ASP.Net内置对象之网页之间传参（二）
Session对象 运用于多个界面调用某一个特定的用户信息,也就是每个Session 对象是独立的,个不受影响. Session对象的读取和存储 Session[name]=”chen”; 可以用来界 ...
- TensorFlow keras dropout层
# 建立神经网络模型 model = keras.Sequential([ keras.layers.Flatten(input_shape=(28, 28)), # 将输入数据的形状进行修改成神经网 ...
- 高德局部刷新标记点，bug解决
将接口返回的经纬集合点在高德地图上标记展示, 如果实时刷新地图标记点,不加优化,则会造成过多的带宽消耗 所以,地图只需加载一次,局部更新标记点就好了 代码: <template> < ...
- C#多线程(13)：任务基础①
目录 多线程编程 多线程编程模式 探究优点 任务操作 两者创建任务的方式 Task.Run() 创建任务 取消任务和控制任务的创建 任务返回结果以及异步获取返回结果 捕获任务异常 全局捕获任务异常 多 ...
- 《JAVA8开发指南》使用流式操作
为什么需要流式操作 集合API是Java API中最重要的部分.基本上每一个java程序都离不开集合.尽管很重要,但是现有的集合处理在很多方面都无法满足需要. 一个原因是,许多其他的语言或者类库以声明 ...
- typeahead自动补全插件的limit参数问题
遇到的问题很诡异: 后台返回的数据都正确就是显示不正常(有时多有时少),后来发现是typeahead的问题,在1.11版本之后,limit参数从option选项里改到了setdata选项: limit ...
- dhcp协议抓包分析
dhcp协议 DHCP,动态主机配置协议,前身是BOOTP协议,是一个局域网的网络协议,使用UDP协议工作,常用的2个端口:67(DHCP server),68(DHCP client). wires ...
- 写了Bug，误执行 rm -fr /*，我删删删删库了，要跑路吗？
每日英语,每天进步一点点(偷笑): 前言 临近五一节,想到有 5 天假期,小林开始飘了. 写个简单的 Bash 脚本都不上心了,写完连检查都不检查,直接拖到到实体服务器跑. 结果一跑起来,发生不对劲, ...
- MySQL事务与并发
很多程序员都学过MySQL,而且也会写SQL语句.但仅仅会写还远远不够,在面试中以及在工作中,还必须要会事务和并发. 一.事务 事务是满足 ACID 特性的操作,可以通过 Commit 提交事务, ...