javascript - 如何防止下拉列表在 DropDownList 中打开？

Question

我有一个自定义表格，我想将其用作 DropDown 部分作为 DropDownList。

理想情况下，当用户单击 DropDownList 时，它应该显示自定义表格而不是通常的下拉列表。我认为在不禁用 DropDownList 控件的情况下很容易阻止打开下拉菜单，但事实并非如此。

有没有一种简单的方法可以在不禁用 DropDownList 的情况下打开它？

编辑:这必须适用于嵌入式 IE 7 网络浏览器，e.preventDefault() 不适用于该浏览器版本

Answer 1

你可以这样做:

基本上，我在下拉菜单上放置了一个不可见的 div 来阻止它，您可以使用屏蔽 div 的 onclick 来处理点击。

编辑:我已经更新了这个 http://jsfiddle.net/EdM7B/1/

<div id='mask' onclick='alert("clicked");' style='width:200px; height:20px; position:absolute; background:white;filter:alpha(opacity=0);'></div>
<select id='selectList' show=1 style='width:200px; height:20px;'>
    <option>Test</option>
</select>

我不得不使用某种 hack，因为 IE 似乎无法正确呈现没有设置背景颜色的 div，因此它无法正常工作。这适用于我的 IE7。

如果你想让它在所有浏览器中工作，你需要添加 chrome/firefox opacity CSS 或者有一些 IE 专用的 CSS 来应用背景颜色。

我认为由于它在上方的定位方式，不透明度实际上无法正常工作，因为该元素是绝对定位的，无论哪种方式似乎都有效。我最初将其设置为不透明度 1，但我觉得这听起来不对，因为我们希望它不可见，所以我将其更改为 0。