过滤select列表

最新推荐文章于 2024-07-20 17:22:27 发布

oo尤慕ps

最新推荐文章于 2024-07-20 17:22:27 发布

阅读量2.8k

点赞数

分类专栏： HTML JavaScript 文章标签： function jquery input html chrome 浏览器

本文链接：https://blog.csdn.net/Youmoo/article/details/7920828

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

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）。