Using multiple selects can be problematic. Perhaps you should consider radio buttons inside a container element which you can expand and contract as needed.
As has been stated, you can't programmatically open a <select> using JavaScript.
However, you could write your own <select> managing the entire look and feel yourself. Something like what you see for the autocomplete search terms on Google or Yahoo! or the Search for Location box at The Weather Network.
I found one for jQuery here. I have no idea whether it would meet your needs, but even if it doesn't completely meet your needs, it should be possible to modify it so it would open as the result of some other action or event. This one actually looks more promising.
I've come across the same problem and I have a solution. A function called ExpandSelect() that emulates mouse clicking on "select" element, it does so by creating an another <select> element that is absolutely posioned and have multiple options visible at once by setting the size attribute. Tested in all major browsers: Chrome, Opera, Firefox, Internet Explorer. Explanation of how it works, along with the code here:
Edit (link was broken).
I've created a project at Google Code, go for the code there:
function down(what) {
pos = $(what).offset(); // remember position
$(what).css("position","absolute");
$(what).offset(pos); // reset position
$(what).attr("size","10"); // open dropdown
}
function up(what) {
$(what).css("position","static");
$(what).attr("size","1"); // close dropdown
}
Now you can call your DropDown just like this
<select onfocus="down(this)" onblur="up(this)">
Works perfect for me.
Maybe better, because you have no problems with the position of the other elemts on the page.
function down(was) {
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was);
$(was).css("position","absolute").attr("size","10");
}
function up(was) {
$('#down_man').remove();
$(was).css("position","static");
$(was).attr("size","1");
}
Change the ID to a fix value mybe not smart but i hope you see the idee.
I tried using mrperfect's answer and i had a couple glitches. With a couple small changes, I was able to get it to work for me. I just changed it so that it would only do it once. Once you exit dropdown, it would go back to the regular method of dropdowns.
function down() {
var pos = $(this).offset(); // remember position
$(this).css("position", "absolute");
$(this).offset(pos); // reset position
$(this).attr("size", "15"); // open dropdown
$(this).unbind("focus", down);
}
function up() {
$(this).css("position", "static");
$(this).attr("size", "1"); // close dropdown
$(this).unbind("change", up);
}
function openDropdown(elementId) {
$('#' + elementId).focus(down).blur(up).focus();
}
One thing that this doesn't answer is what happens when you click on one of the options in the select list after you have done your size = n and made it absolute positioning.
Because the blur event makes it size = 1 and changes it back to how it looks, you should have something like this as well
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var
This could be bound for example to a keypress event, so when the element has focus the user can type and it will expand automatically...