【代码库】删除select元素节点下所有的OPTION节点

た入场券 2022-09-24 05:17 177阅读 0赞

## 删除select标签节点下所有的OPTION节点 ##

## 方法一： ##

Js代码

function DeleteOptions() {   
                var obj = document.getElementsByTagName("select")[0];  
                var selectOptions = obj.options;  
                var optionLength = selectOptions.length;  
                for(var i=0;i <optionLength;i++)  
                {  
                    obj.removeChild(selectOptions[0]);  
                }  
            }

## 方法二：(那右边的Select中的所有option移到左边的Select) ##

Js代码 收藏代码

function MoveAllRightBtn(){   
                var columnlength=$('queryColumn').length;  
                var TempText;  
                var TempValue;  
                for(var i=0;i<columnlength;i++){  
                    TempText=$('queryColumn').options[i].text;  
                    TempValue=$('queryColumn').options[i].value;  
                    $('queryColumn').remove(i);  
                    $('SearchqqueryColumn').options.add(new Option(TempText,TempValue));  
                }  
            }

以上两个方法都不够好！因为它们一次性都册除不了，因为删除了一个它的$(‘queryColumn’)在option的序号就变了！

简单最优的方法如下：（只需将length置0）  
Js代码 收藏代码

$('SearchqqueryColumn').options.length = 0;
    Js代码  收藏代码
        <script> function clearOption() { document.getElementById("testSelect").options.length = 0; } </script>

(那右边的Select中的所有option移到左边的Select)实现如下：  
Js代码 收藏代码

function MoveAllRightBtn(){   
            var columnlength=$('queryColumn').options.length;  
            var TempText;  
            var TempValue;  
            for(var i=0;i<columnlength;i++){  
                TempText=$('queryColumn').options[i].text;  
                TempValue=$('queryColumn').options[i].value;  
                $('SearchqqueryColumn').options.add(new Option(TempText,TempValue));  
            }  
            $('queryColumn').options.length = 0;  
        }