js 解决 select option 过多 ,筛选过滤功能
来源:互联网 发布:知乎怎样查航班动态 编辑:程序博客网 时间:2024/06/05 15:14
先看例子:
如图,品牌有很多很多,不加筛选,选择就起来就会很费力,那么我们可以在后面添加一个用于筛选的 input
这里 品牌的 select id是 brand 筛选框代码:
<input id="brand_search" placeholder="筛选">
接下来只需要添加下面这段js就可以了:
// 引入jquery 根据实际 修改jquery路径,已经引入的不需要再引入<script src="jquery.1.3.2.min.js"></script><script type="text/javascript">//<![CDATA[ jQuery(function () { var opts = jQuery('#brand option').map(function () { return [[this.value, jQuery(this).text()]]; }); jQuery('#brand_search').keyup(function () { var rxp = new RegExp(jQuery('#brand_search').val(), 'i'); var optlist = jQuery('#brand').empty(); opts.each(function () { if (rxp.test(this[1])) { optlist.append(jQuery('<option/>').attr('value', this[0]).text(this[1])); } }); }); });//]]></script>
阅读全文
0 0
- js 解决 select option 过多 ,筛选过滤功能
- 解决<select>的option过多而造成的下拉过长的方法
- js 兼容问题 SELECT OPTION
- js 操作select option
- js操作select option
- js操作select option
- js select 增加option
- js 操作select option
- js操作select option
- js select option对象
- js操作select option
- js操作select option
- js中模拟筛选过滤
- JS获取select-option text
- js select option添加/删除
- js 操作select和option
- js 操作select和option
- js 操作select和option
- 全面理解Android中的Px,DPI,DIP,Density,Sp等概念
- 行人属性“Person Attribute Recognition with a Jointly-trained Holistic CNN Model”
- hbase集群搭建
- ubuntu16.04(64位)兼容32位程序
- 表
- js 解决 select option 过多 ,筛选过滤功能
- 利用SWIG转换C++接口到Java接口
- javaSE实战--(API)中的集合框架
- 极光推送
- js 之间的页面传值的
- 根据图片地址生成ImageView对象
- hibernate生成数据表时报错:HHH000388: Unsuccessful: create table emp (empid integer generated by default as i
- Banner轮播图
- MongoDB在线教程_良心推荐(转)