Prevent select dropdown to open but allow its events to fire - html

Question

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.)

Answer 1

I doubt this will actually prevent it from opening, but it will ensure that the DropDown will always maintain the same value:
<select name="theselect" onchange="this.selectedIndex = 1;">
<option value="Red">Red</option>
<option value="Green" selected="selected">Green</option>
<option value="Blue">Blue</option>
</select>

Answer 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...

Answer 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.

Answer 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

Answer 5

You could remove all of the options from the dropdown, or hide the current select element and replace it with an empty one.
<select id="main">
<option name="1">1</option>
<option name="2">2</option>
<option name="3">3</option>
</select>
<select id="empty" style="display:none;">
</select>
<script>
function disableSelect() {
document.getElementById('main').style.display = 'none';
document.getElementById('main').style.display = '';
}
</style>