js 删除select中的所有option

最新推荐文章于 2020-12-28 23:42:13 发布

fsgsdfghdfh

最新推荐文章于 2020-12-28 23:42:13 发布

阅读量3.5k

点赞数

分类专栏： Javascript部分文章标签： javascript ViewUI

Javascript部分专栏收录该内容

16 篇文章

订阅专栏

本文介绍了几种在网页中批量清除Select元素下拉列表中的所有选项的方法。包括直接设置options长度为0来达到快速清空的目的，这种方法简洁高效。此外，还提供了一种将一个Select中的所有选项移动到另一个Select中的实现方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

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)

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的序号就变了！

都好的方法是：

$('SearchqqueryColumn').options.length = 0;

或：

<script>
function clearOption()
{
    document.getElementById("testSelect").options.length = 0;
}
</script>

(那右边的Select中的所有option移到左边的Select)实现如下：

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;
	}