coderb Posted August 21, 2008 Share Posted August 21, 2008 Hi All, I have a <select> box with options that I want to open automatically (as if user clicked on selects down arrow), using javascript. Any ideas how? Is there a correct javascript method to manually trigger the the built in onclick event of a select? thanks Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 21, 2008 Share Posted August 21, 2008 Take a look at the solution posted here: http://www.webmasterworld.com/javascript/3341791.htm Quote Link to comment Share on other sites More sharing options...
coderb Posted August 21, 2008 Author Share Posted August 21, 2008 hi mjdamato, I actually found that one, but solutions seem a bit messy or hacks, which I guess would not have been created if there was a straight forward solution. But I was hoping to find a standard cross-browser method to simply force the click event on the select element. any more ideas? thanks.. Quote Link to comment Share on other sites More sharing options...
lemmin Posted August 21, 2008 Share Posted August 21, 2008 I am pretty sure it is impossible to make a select object drop down its options without user input. Something like this looks pretty real, except for the fact that IE and FF (and other browser) display the drop down menu different, graphically. I made this one to look like IE's. This code needs a lot of work-arounds to make it act the same as a regular drop down, but hopefully this will give you an idea of where to start. <html> <head> <script type="text/javascript"> function dropDown() { menu = document.getElementById("menu1"); sel = document.getElementById("sel1"); cObj = sel; newLeft = 0; newTop = 22; if (cObj.offsetParent) { newLeft += cObj.offsetLeft; newTop += cObj.offsetTop; while(cObj = cObj.offsetParent) { newLeft += cObj.offsetLeft; newTop += cObj.offsetTop; } } menu.style.left = newLeft; menu.style.top = newTop; menu.style.width = sel.clientWidth; menu.style.display='block'; } </script> </head> <body style="text-align:center"> <form> <select id="sel1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div id="menu1" STYLE="font-family:'Microsoft Sans Serif';font-size:13px;background-color:'#FFFFFF';border:1px solid black;display:none;position:absolute;left:0px;top:0px;text-align:left;"> <div value="1" STYLE="padding-left:2px;width:100%;" onmouseover="this.style.backgroundColor='#000055';this.style.color='#FFFFFF';" onmouseout="this.style.color='';this.style.backgroundColor=''" onmousedown="document.getElementById('sel1').selectedIndex = (this.value-1);this.parentNode.style.display='none';">1</div> <div value="2" STYLE="padding-left:2px;width:100%;" onmouseover="this.style.backgroundColor='#000055';this.style.color='#FFFFFF';" onmouseout="this.style.color='';this.style.backgroundColor='';" onmousedown="document.getElementById('sel1').selectedIndex = (this.value-1);this.parentNode.style.display='none';">2</div> <div value="3" STYLE="padding-left:2px;width:100%;" onmouseover="this.style.backgroundColor='#000055';this.style.color='#FFFFFF';" onmouseout="this.style.color='';this.style.backgroundColor=''" onmousedown="document.getElementById('sel1').selectedIndex = (this.value-1);this.parentNode.style.display='none';">3</div> </div> </form> <button onclick="dropDown()">test</button> </body> </html> Sorry that those styles are so messy. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.