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:

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

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.

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