I have a custom table which I'd like to use as the DropDown portion as a DropDownList.

Ideally, when users click on a DropDownList, it should show the custom table instead of the usual drop down. I thought it'd be easy to prevent the dropdown from opening without disabling the DropDownList control, however that doesn't appear to be the case.

Is there an easy way to prevent a DropDownList from opening without disabling it?

Edit: This has to work for an embedded IE 7 web browser, and e.preventDefault() does not work in that browser version

I have a custom table which I'd like to use as the DropDown portion as a DropDownList.

Ideally, when users click on a DropDownList, it should show the custom table instead of the usual drop down. I thought it'd be easy to prevent the dropdown from opening without disabling the DropDownList control, however that doesn't appear to be the case.

Is there an easy way to prevent a DropDownList from opening without disabling it?

Edit: This has to work for an embedded IE 7 web browser, and e.preventDefault() does not work in that browser version

• javascript
• jquery
• asp.net
• drop-down-menu
• internet-explorer-7

• 2 If you are customizing the format of the dropdown contents, you might as well customize the dropdown itself as well. Just use a textbox to display the current selected item, and a button with a down-arrow icon in it to resemble a dropdown. – mellamokb Commented May 31, 2012 at 19:58
• @mellamokb I was hoping there'd be an easier way... I need to also track the SelectedValue and DisplayValue separately, since the actual selected value is the UTC date, while the display date is based on the user's timezone – Rachel Commented May 31, 2012 at 19:59
• Have you tried an onclick event with preventDefault or return false? – mellamokb Commented May 31, 2012 at 20:01
• @mellamokb Yes, neither of those prevents the dropdown from opening. I tried both click and mousedown – Rachel Commented May 31, 2012 at 20:02
• event.preventDefault works for me on mousedown in Chrome at least: jsfiddle.net/RCCKj. Found on this related question: stackoverflow.com/questions/8062138/… – mellamokb Commented May 31, 2012 at 20:07

4 Answers 4

You can do something like this:

Basically, I have positioned an invisible div over the dropdown to block it, and you can handle the click with the onclick of the masking div.

EDIT: I have updated this 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>

I had to use a sort of hack because IE doesn't seem to render divs properly that have no background colour set, so it wasn't working correctly. This works in my IE7.

If you want it to work in all browsers you'll need to add chrome/firefox opacity CSS or have some IE only CSS to apply background colour.

I think due to the way it's positioned above, the opacity is actually not working properly because the element is positioned absolutely, either way it seems to work. I originally had it as opacity 1, but that sounds wrong to me as we want it invisible, so I changed it to 0.

It's possible to stop the dropdownlist from showing by using jQuery's event.preventDefault in the mousedown event (demo: http://jsfiddle.net/RCCKj).

Also see this related question: stop chrome to show dropdown list when click a select

Put it inside a div like this:

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

You should set the css property pointer-events to none, then you can show your table hidden in a div or loaded it by using ajax, something like this:

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

Have you thought about using a mega menu for this, you can put anything you want in the dropped down portion - for example your table