Как я могу предотвратить раскрытие списка в DropDownList?

У меня есть пользовательская таблица, которую я бы хотел использовать как часть DropDown как DropDownList.

Table

В идеале, когда пользователи нажимают кнопку DropDownList, она должна отображать пользовательскую таблицу вместо обычного раскрывающегося списка. Я подумал, что было бы легко предотвратить раскрытие раскрывающегося списка без отключения элемента управления DropDownList, однако это, похоже, не так.

Есть ли простой способ предотвратить открытие DropDownList без его отключения?

Изменить: Это должно работать для встроенного веб-браузера IE 7, а e.preventDefault() не работает в этой версии браузера

Ответы

Ответ 1

Вы можете сделать что-то вроде этого:

В принципе, я поместил невидимый div над выпадающим списком, чтобы заблокировать его, и вы можете обрабатывать щелчок с помощью onclick маскирующего div.

EDIT: я обновил этот 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, похоже, не отображает divs должным образом, у которых не установлен цвет фона, поэтому он работал неправильно. Это работает в моем IE7.

Если вы хотите, чтобы он работал во всех браузерах, вам нужно добавить CSS с непрозрачностью chrome/firefox или использовать только CSS для IE, чтобы применить цвет фона.

Я думаю, что из-за того, как он позиционируется выше, непрозрачность на самом деле не работает должным образом, потому что элемент позиционируется абсолютно, так или иначе он работает. Первоначально я имел его как непрозрачность 1, но это звучит неправильно для меня, поскольку мы хотим, чтобы он был невидимым, поэтому я изменил его на 0.

Ответ 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 значение none, тогда вы можете показать свою таблицу, скрытую в div, или загрузить ее с помощью ajax, примерно так:

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

Ответ 4

Вы подумали об использовании mega menu для этого, вы можете поместить все, что захотите, в упавшую часть - например, ваша таблица