How can I prevent the dropdown from opening in a DropDownList?

Question

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

Answer 1

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.