处理IE浏览器下，option等元素无法重绘的问题

Posted 2020-10-11

前几天遇到一个通过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);
});