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