Prevent Select Dropdown To Open But Allow Its Events To Fire

Is there any way I can trap html select events, and prevent the html select dropdown to open? (Disabling html select is ruled out since the events will be disabled too.)

Solution 1:

I doubt this will actually prevent it from opening, but it will ensure that the DropDown will always maintain the same value:

<selectname="theselect"onchange="this.selectedIndex = 1;"><optionvalue="Red">Red</option><optionvalue="Green"selected="selected">Green</option><optionvalue="Blue">Blue</option></select>

Solution 2:

This doesn't disable the "dropdown to open", but if you don't want anything selectable, a trick I used was to make <optgroup> instead of option. However, I'm confused why you would want to disable the dropdown, but disabling it is not option...

Solution 3:

If you don't want to drop down a drop down box then why make it a drop down control.

Use an image that looks like a drop down and set it as the background if you need to get the feel of a drop down box.

Solution 4:

I second what Myles says: You hope you find these links useful:

Making custom dropdowns http://jonathan.tang.name/code/jquery_combobox

Demo: http://jonathan.tang.name/files/jquery_combobox/demo.html

Solution 5:

You could remove all of the options from the dropdown, or hide the current select element and replace it with an empty one.

<selectid="main"><optionname="1">1</option><optionname="2">2</option><optionname="3">3</option></select><selectid="empty"style="display:none;"></select><script>functiondisableSelect() {
    document.getElementById('main').style.display = 'none';
    document.getElementById('main').style.display = '';
}
</style>