html select下拉框上显示空的实现方法

最新推荐文章于 2022-11-23 15:11:25 发布

涛歌依旧

最新推荐文章于 2022-11-23 15:11:25 发布

阅读量2.2w

点赞数 1

分类专栏： S1: Web

本文链接：https://blog.csdn.net/stpeace/article/details/50815814

版权

S1: Web 专栏收录该内容

133 篇文章 57 订阅

订阅专栏

在之前的博文中，我们讨论了可编辑的html下拉框的间接实现，在本文中，我们来看看如果将html的下拉框显示为空白。

先看代码：

<html>      
    
<select id="xxx" >      
<option value="10">1</option>  
<option value="20">2</option>      
<option value="30">3</option>      
<option value="40">4</option>   
</select>

<button onClick="test()">test </button>

<script>
function test()
{
	var x = document.getElementById("xxx");
        x.value = "40";
        alert(x.selectedIndex);
}
</script>

</body>   
</html>

点击按钮后，弹框为 3，符合预期。

继续看：

<html>      
<body>
   
<select id="xxx" >      
<option value="10">1</option>  
<option value="20">2</option>      
<option value="30">3</option>      
<option value="40">4</option>   
</select>

<button onClick="test()">test </button>

<script>
function test()
{
	var x = document.getElementById("xxx");
        x.value = "xxx";
        alert(x.selectedIndex);
}
</script>

</body>   
</html>

点击按钮后，下拉框显示为空，弹框为-1，达到目的，当然，我个人更建议的方法是这样的：

<html>      
<body>
    
<select id="xxx" >      
<option value="10">1</option>  
<option value="20">2</option>      
<option value="30">3</option>      
<option value="40">4</option>   
</select>

<button onClick="test()">test </button>

<script>
function test()
{
	var x = document.getElementById("xxx");
    x.selectedIndex = -1;
}
</script>

</body>   
</html>

当然，也可以在页面加载时就置空，如下：

<html>      
    
<body onload="test()">
<select id="xxx" >      
<option value="10">1</option>  
<option value="20">2</option>      
<option value="30">3</option>      
<option value="40">4</option>   
</select>

<script>
function test()
{
	var x = document.getElementById("xxx");
    x.selectedIndex = -1;
}
</script>

</body>   
</html>

涛歌依旧

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html select下拉框上显示空的实现方法

在之前的博文中，我们讨论了可编辑的html下拉框的间接实现，在本文中，我们来看看如果将html的下拉框显示为空白。先看代码： 1 2 3 4 test function test(){ var x = document.getElementById("xxx"); x.
复制链接

扫一扫

专栏目录