在select中，载入时默认select为空白，选项内不显示空白项

设置Select默认为空

最新推荐文章于 2023-07-28 01:00:00 发布

转载最新推荐文章于 2023-07-28 01:00:00 发布 · 2.3k 阅读

HTML 专栏收录该内容

45 篇文章

订阅专栏

本文介绍两种方法实现网页Select控件加载时默认显示为空白：一是使用JavaScript设置selectedIndex为-1；二是采用CSS隐藏第一个Option。这两种方法均可满足需求且不影响用户体验。

在select中，载入时默认select为空白，选项内不显示空白项

2017-03-08 16:26 5789人阅读评论(0) 收藏举报

分类：

css（17）

JavaScript（18）

今天做select的时候，页面要求为：载入默认选项框为空白，点击下拉框显示正常选项。

找了半天有两种办法，一种纯css实现，一种借助js实现。

先说js的办法吧。

html：

[html]view plaincopy 
    
print?
 <body onload="load()">  
     <select id="abc" >          
         <option >1</option>      
         <option >2</option>          
         <option >3</option>          
         <option >4</option>       
     </select>  
 </body>  

js：

[html]view plaincopy 
    
print?
 <script>    
 function load()    
 {    
     var x = document.getElementById("abc");    
     x.selectedIndex = -1;    
 }    
 </script>   

实测成功。

纯css的方法：

[html]view plaincopy 
    
print?
 <option selected="selected" disabled="disabled"  style='display: none' value=''></option>  

上面的option置于第一行即可。

其实测了测，发现如果只保留：

[html]view plaincopy 
    
print?
 style='display: none'  

效果也是一样的。