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

骑猪看日落 2022-04-16 00:59 448阅读 0赞

**分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangjunshow]**

**也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！**

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

#### 给我老师的人工智能教程打call！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangjunshow] ####

![这里写图片描述][SouthEast]

[http_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485
[SouthEast]: /images/20220416/3b391e16388a408ebf2c178599a869a0.png