javascript - How to open select element using jquery

Question

I have a select element as follows. i want to open it without user having to click on it.

    <select id="selId" class="pos_fixed">
       <option value="volvo">Option1</option>
       <option value="saab">Option2</option>
       <option value="mercedes">Option3</option>
       <option value="audi">Option4</option>
    </select>

Please let me know if its possible using jquery or javascript

Answer 1

You will pass a CSS selector to openSelect() and it will open the select element for you.

var openSelect = function(selector){
     var element = $(selector)[0], worked = false;
    if (document.createEvent) { // all browsers
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    } else if (element.fireEvent) { // ie
        worked = element.fireEvent("onmousedown");
    }
    if (!worked) { // unknown browser / error
        alert("It didn't worked in your browser.");
    }   
}

$(function(){ // when DOM is ready
   // open .select element
   openSelect('.select'); 
});

Here's a fiddle: http://jsfiddle.net/Z48wF/1/

Source: How to open the select input using jquery @stackoverflow.com