Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to open select element using jquery

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

like image 204
Parag A Avatar asked Apr 22 '13 21:04

Parag A


Video Answer


2 Answers

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

like image 113
kyle.stearns Avatar answered Oct 04 '22 03:10

kyle.stearns


You can find a similar question here: How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?

I don't think there is a single solution that would work in every browser.

I can confirm that using document.createEvent() and .dispatchEvent() (as explained at the above link) works great in WebKit browsers (Safari, Chrome) but not in Firefox, Opera and IE.

However, you can try combining the different solutions listed there.

like image 43
zengabor Avatar answered Oct 04 '22 02:10

zengabor