SELECT中OPTION元素的显示隐藏

在Chrome和Firefox浏览器中，有两种方式控制显示隐藏。
1、option元素的hidden属性，true为隐藏，false为显示；
2、option元素的style.display设置为none则为隐藏；
这两种方式都可以通过JS来控制。

在IE中，很麻烦，上面两种方式都不支持，目前的办法是给外面加一层隐藏的span,参考网址：http://blog.baiwand.com/?post=162
参考网址中用了jQuery，如没有引入jQuery则需要自己用原生的JS实现。

下面是我实现的一个参考：

function handleOption(select,keyWord){
    if(isIE()){
        var children = select.children;
        for(var i = 0; i < children.length; i++){
            var nodeNow = children[i];
            if (nodeNow.nodeName == "OPTION"){
                if(nodeNow.text.search(keyWord) != -1){
                    //show matched.
                    nodeNow.hidden = false;
                    }else{
                        //hide not matched.
                        nodeNow.hidden = true;
                        var nodeNowBak = nodeNow.cloneNode(true);
                        var span = document.createElement ("span");
                        span.style.display = "none";
                        span.appendChild(nodeNowBak);
                        nodeNow.parentNode.replaceChild(span,nodeNow);
                    }
                }else if(nodeNow.nodeName == "SPAN"){
                    //you can use nodeNow.children[0] boldly, because the span node is created by me, so the span must has one option.
                    var nodeOption = nodeNow.children[0];
                    if(nodeOption.text.search(keyWord) != -1){
                        //show matched.
                        nodeOption.hidden = false;
                        var optionBak = nodeOption.cloneNode(true);
                        nodeNow.parentNode.replaceChild(optionBak,nodeNow);
                    }else{
                        //hide not matched.
                        nodeOption.hidden = true;
                        //this nodeOption's parentNode is span, the span's display value is none, so it's status is already hidden.
                    }
                }
        }
    }else{
        var allOptions = select.options;
        //keyWord is not null
        if(keyWord){
            for(var i = 0; i < allOptions.length; i++){
                var optionNow = allOptions[i];
                if(optionNow.text.search(keyWord) != -1){
                    //show matched.
                    optionNow.hidden = false;
                }else{
                    //hide not matched.
                    optionNow.hidden = true;
                }
            }
        }else{
            //show all.
            for(var i = 0; i < select.options.length; i++){
                var optionNow = allOptions[i];
                optionNow.hidden = false;
            }
        }
    }
}


function isIE(){
    return (!!window.ActiveXObject) || ("ActiveXObject" in window);
}

这个方法对IE和Chrome都做了判断，其实对IE的方法对Chrome也可以用，但是性能上肯定要稍差于只修改hidden属性。