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

来源：互联网发布：淘宝网注册支付宝流程编辑：程序博客网时间：2024/05/20 02:26

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

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

分类：

css（17）

JavaScript（18）

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

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

先说js的办法吧。

html：

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

js：

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

实测成功。

纯css的方法：

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

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

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

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

效果也是一样的。

阅读全文

0 0