您的位置：首页 > Web前端 > HTML

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

2016-03-06 22:23 471 查看

在之前的博文中，我们讨论了可编辑的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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航