HTML 让select 提交但不显示

最新推荐文章于 2023-06-04 15:09:25 发布

原创最新推荐文章于 2023-06-04 15:09:25 发布 · 765 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #select #提交 #不显示

本文介绍了一种让Select元素不可见但仍能进行提交的方法，通过使用CSS定位和透明度技巧来实现。这种方法适用于希望隐藏下拉菜单但保持选项可用的场景。

让Select不可见，一般都在用display:none, 但这样也带来一个问题，就是这个select不被提交，如果既想让select提交，又不可见，可以用“盖住”select的方法。

很多人说这个需求变态，其实需求原则客户的种种需要，并没有变态一说。

盖住select，让它不显示，但可以提交，方法如下：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div style="position:relative">
<select  onfocus="this.blur();"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;background:#fff;opacity:0;filter:alpha(opacity=0)"> </div>
</div>