Html Select dropdown

Question

is there any way i can trap html select events and can prevent the html select dropdown to open (disabling html select is ruled out)

Answer 1

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 2

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 3

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 4

This works great for me in IE and Chrome, there's no flicker or anything:

html

<select id="MySelect"><option>Hello</option></select>

js

MySelect.onmousedown = function ()
{
    window.setTimeout(function () 
    { 
        //- An immediate blur, then refocus stops the options from being displayed
        this.blur();
        this.focus();
        //- so now we run our custom function
        runOtherFunctionInstead(); 
    },0);
}

Make sure the js runs after the select element has been parse by placing it in an onload or ondocumentready or a script block after the select element. Haven't tried it in Firefox or Opera. Assumedly it would work in Safari, though.

Answer 5

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

Making custom dropdowns http://jonathan.tang.name/code/jquery%5Fcombobox

Demo: http://jonathan.tang.name/files/jquery%5Fcombobox/demo.html

Answer 6

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>