Question

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

Table

理想情况下，当用户点击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>

我不得不使用某种黑客攻击，因为IE似乎没有正确渲染没有背景颜色的div，所以它无法正常工作。这适用于我的IE7。

如果你想让它在所有浏览器中运行，你需要添加chrome / firefox opacity CSS或者只有一些IE才能应用背景颜色。

我认为由于它位于上面的方式，不透明度实际上无法正常工作，因为元素绝对定位，无论它看起来如何工作。我最初把它作为不透明度1，但这对我来说听起来不对，因为我们希望它不可见，所以我将它改为0.

Answer 2

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

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

Answer 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');
        });
    });

Answer 4

您是否考虑过使用mega menu，您可以在下拉部分放置任何内容 - 例如您的表格

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

4 个答案: