使用select下拉框，默认内容为空白，且选项内不显示空白项

转自：http://blog.csdn.net/wzj2584454/article/details/60874919

默认内容为空白，点击下拉框只显示除空白选项的其他正常选项。 

有两种办法，一种纯css实现，一种借助js实现。

JS方法：

  1. <body onload="load()">  
  2.     <select id="abc" >          
  3.         <option >1</option>      
  4.         <option >2</option>          
  5.         <option >3</option>          
  6.         <option >4</option>       
  7.     </select>  
  8. </body>  
  1. <script>    
  2. function load()    
  3. {    
  4.     var x = document.getElementById("abc");    
  5.     x.selectedIndex = -1;    
  6. }    
  7. </script>    

CSS方法： 

  1. <option selected="selected" disabled="disabled"  style='display: none' value=''></option>  
上面的option置于第一行即可。

 

只保留：style='display: none'  效果也是一样的。

 

posted @ 2017-06-20 17:03  酷酷的老猫  阅读(2085)  评论(0)  编辑  收藏  举报