Opening Select Boxes via JS

[dptoot]

My optimism is low at this point but I am looking to "open" (display the select options of) a select drop down using javascript. An exhaustive google search has come up with no answers but I thought I would probe the brains on the forum. Anyone got any ideas?

dptoot

[Zaphod42]

well....since we are in a javascript forum.....why don't you just build your own select box? But if you aren't into that I would just:

function init(){
selectBox = document.getElementById('mySelectBox');
selectBox.onmouseup=function(){selectBox.size=0};	
selectBox.size=selectBox.options.length;
}

this should work in any FF and any IE at least back to 5

[dptoot]

So I have already constructed a js based select box which works however there are some bugs with keystroke scrolling. Also we are needing to have these select boxes interact with a a4j ajax updater. Point being we need the select box. your solution is closer than we have been in teh past but it is still not "opening" the select but rather increasing the size of actual select. The optimum result is the select box displaying its options just as it would if the user had click on the original select box.

[Zaphod42]

okay, if you've already constructed a js select box....your scrolling problem more than likely has to do with how you set up the "items" of the list...try appending them all to a div that drops down when you run the "open" function for your select box...also in the open function call the "focus" method available on that content div, if your scroll is set to auto, you now have an open selectbox with scrolling that should work just like all the other scrolling works on the page....
I can't find another solution to open a HMTL select box with javascript, there is a way to "create" your own events which allows you to interact with the page via these custom events without the user having to fire anything, but I'm not really sure how it works.

[mrhoo]

var who=document.getElementsByName(selectname)[0];
who.size= who.options.length+'';
who.focus();

[Zaphod42]

that won't work either....when you call

var who=document.getElementsByName(selectname)[0];

you are referring to the first child of the select box....the child objects don't have the 'options' property...and the size of the child elements wouldn't impact the state of the select box at any rate....

[mrhoo]

document.getElementsByName(selectname)[0] returns the first element that has the name you use in place of selectname.
If the element is not a radio or checkbox input, you probably have only one element with that name.
Assuming you pass it the name of a select element, that element has a size attribute and an options array.