前几天遇到一个通过input输入值筛选select选项的问题,结果发现了ie浏览器下option元素无法重绘的问题,就是不能隐藏不符合筛选条件的option。
后来通过jQuery的clone方法解决了。
首先监听input输入,clone一个select副本,将原来的select清空,然后从副本中筛选符合条件的option,再添加到select中,来解决此问题。
//to filter the right option
//首先创建一个筛选方法
var searchAppFactory = function(){
var $select = null,//save the select content
$rightGroupCache = {},//save the before group
firstTime = true;//When the firstTime is true, copy once
return function($input, $slt){
var $rightGroup = [];
if(firstTime){
$select = $slt.clone();
firstTime = false;
}
$slt.empty();
var val = $input[0].value;
//to deal the cache
if($rightGroupCache[val]){
$rightGroup = $rightGroupCache[val];
}else{
var $optionList = $select.children();
for(var i = 0, len = $optionList.length; i < len; i++){
var $opt = $optionList.eq(i);
var text = $opt.text();
if(text.indexOf(val) >= 0){
$rightGroup.push($opt.clone());
}
}
}
$slt.append($rightGroup);
};
};
var searchApp = searchAppFactory();
//监听input输入的值,然后筛选option
$(".filter").on("input", function(){
var $input = $(this),
$slt = $("#from");
searchApp($input, $slt);
});
原文:http://www.cnblogs.com/fengxh/p/7712166.html