Question

I have a dropdown. I have a button too.
I have special requirement.

When a user click on the button, the dropdown should be expanded.

Answer 1

While you can’t achieve exactly what you want, I came up with alternative way. When the button is clicked you can set the drop down size dynamically to the amount of items it got, causing it to “open” and show all the items.

Then, when selecting an item you can set the size back to 1. This effectively has the same look and feel like what you want.

Complete code for this would be:

window.onload = function() {
    var oDDL = document.getElementById("myselect");
    oDDL.onchange = function() {
        //drop down item selected, reset size back to 1 to "close" the list:
        this.size = 1;
    };

    var oButton = document.getElementById("btnOpenDropDown");
    oButton.onclick = function() {
        //set size to number of items to "open" the list:
        oDDL.size = oDDL.options.length;
        oDDL.focus();
    }
};​

Live test case.