9

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

桌子

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

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

编辑：这必须适用于嵌入式 IE 7 Web 浏览器，并且e.preventDefault()不适用于该浏览器版本

4

4 回答 4

7

你可以这样做：

基本上，我在下拉菜单上放置了一个不可见的 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 only CSS 来应用背景颜色。

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

于 2012-06-07T12:12:09.793 回答
4

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

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

于 2012-06-01T13:01:32.087 回答
2

把它放在这样的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 属性指针事件设置为无，然后您可以显示隐藏在 div 中的表格或使用 ajax 加载它，如下所示：

   (document).ready(function() {
        $("#dllDiv").click(function() {
            alert('adasd');
        });
    });
于 2012-05-31T22:24:39.297 回答
0

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

于 2012-05-31T21:06:41.633 回答