过滤select列表
来源:互联网 发布:云计算技术与应用课程 编辑:程序博客网 时间:2024/05/17 07:51
html页面中,如果select列表的option太多,会给选择带来一定的麻烦,我从这儿发现一个js库(下载),它允许你根据输入的关键字对option元素进行过滤。
下面是一段示例代码(demo):
html页面
<select size="5"> <option>one</option> <option>two</option> <option>three</option> <option>four</option> <option>five</option></select><br/><input value="search"/>
js片段(jQuery不是必须的)
var myfilter = new filterlist($("select")[0]);$("input").focus(function() { this.value = ""}).keyup(function() { myfilter.set(this.value)})
以及一小点css
select{ width:6em;}input{ width:6em;}
使用分析:
1、先获取select元素
2、将返回的select元素传递给filterlist构造函数,创建一个filterlist对象
3、在filterlist对象上设定要过滤的文本值
4、okay。更多特性请查看原文。
笔者刚才试着用jQuery写了一个作用和filterlist类似的代码(demo),其它部分不变,js代码如下
var $options = $("select").clone();$("input").focus(function() { this.value = ""}).keyup(function() { $("option").remove(); var key=this.value?":contains("+this.value+")":""; $options.children(key).clone().appendTo($("select"));})
惊讶地发现:
1、在chrome下,设置option元素的style.display=none,不会隐藏该option元素(其它浏览器没做测试,欢迎给出你的试验结果)
2、在keyup函数中,如果不使用clone方法($options.children(key).clone()),$options变量中保存的某些元素会在调用remove($("option").remove();)时,也被remove掉(我想这是因为附加到$("select")对象上的元素是$options对象内元素的引用,当然,引用的都是option)。
- 过滤select列表
- 原生js实现对select下拉列表的内容过滤
- 过滤列表
- Python 过滤列表
- python列表过滤
- 列表过滤的方式
- jQuery Mobile 列表过滤
- 第四章 select where过滤
- 带输入过滤的select
- SELECT语句的过滤条件
- SELECT列表框提示
- SELECT列表框提示
- select 动态列表选择
- 动态列表Select
- 谈select列表框
- select下拉列表级联
- select列表双向选择
- select列表双向选择
- 关于ubuntu中gurb有关文件配置
- Android Property
- 1040 凑表达式
- java 解析xml
- 对Java接口和抽象类的认识及分析
- 过滤select列表
- UIView的clipsToBounds属性
- 安装 postgresql + proj + geos + postgis
- jQuery实现可移动(draggable)和可缩放(sizable)网页元素
- 保护iPhone应用程序中的资源文件
- STL remove 和容器的成员函数erase
- linux inotify 研究7
- pyinstaller使用
- C/C++数组名与指针区别深入探索