如何防止下拉列表在 DropDownList 中打开？答案

【问题标题】：How can I prevent the dropdown from opening in a DropDownList?如何防止下拉列表在 DropDownList 中打开？
【发布时间】：2012-06-06 02:42:04
【问题描述】：

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

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

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

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

【问题讨论】：

如果您正在自定义下拉内容的格式，您也可以自定义下拉内容本身。只需使用一个文本框来显示当前选定的项目，并使用一个带有向下箭头图标的按钮来显示下拉菜单。
@mellamokb 我希望有更简单的方法...我还需要分别跟踪 SelectedValue 和 DisplayValue，因为实际选择的值是 UTC 日期，而显示日期基于用户的时区
您是否尝试过使用preventDefault 或return false 的onclick 事件？
@mellamokb 是的，这些都不能阻止下拉菜单打开。我尝试了click 和mousedown
event.preventDefault 至少在 Chrome 中的 mousedown 上为我工作：jsfiddle.net/RCCKj。在这个相关问题上找到：stackoverflow.com/questions/8062138/…

标签： javascript jquery asp.net drop-down-menu internet-explorer-7

【解决方案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。

【讨论】：

确实非常聪明！ :) +1

【解决方案2】：

可以通过在mousedown 事件中使用jQuery 的event.preventDefault 来阻止下拉列表显示（演示：http://jsfiddle.net/RCCKj）。

另请参阅此相关问题：stop chrome to show dropdown list when click a select

【讨论】：

不幸的是，我需要它在嵌入式 IE 7 网络浏览器中工作，但它没有。
在 IE7 上，“event.preventDefault()”命令将引发 javascript 错误，可能是因为在您的情况下，“event”属性指的是除了 select 的 mousedown 之外的另一个事件。但是由于这个 javascript 错误，阻止了下拉打开。也许是一个很好的“副作用”。
本来打算使用它，但似乎如果您在非调试模式下双击它（使用 ie10 模拟 ie8），它将打开下拉菜单。

【解决方案3】：

像这样放在一个 div 中：

    <div id="dllDiv" style="width:200px;height:200px;">
        < asp:DropDownList ID="DropDownList1" runat="server" style="z-index:-1000px;pointer-events:none;">
        < /asp:DropDownList>
    </div>

你应该将css属性pointer-events设置为none，然后你可以显示你的表格隐藏在一个div中或使用ajax加载它，如下所示：

   (document).ready(function() {
        $("#dllDiv").click(function() {
            alert('adasd');
        });
    });

【讨论】：

【解决方案4】：

您是否考虑过为此使用mega menu，您可以在下拉部分中放入任何您想要的东西 - 例如您的桌子

【讨论】：