Force all options of a select list to appear as expanded on click

Question

I would like to create the following functionality:

A user clicks on a button (any button will do), and a select list will appear with all the options expanded inside a slide down window below the button.

I know how to make the slide window and all that, but I haven't found any info on how to make a select list appear as expanded given a click event.

The tricky part is, I'm working within a CMS context where I cannot change the html, so I have to implement a solution with only jQuery.

Here is the code for the form.

<p>Example Button (Could be any element outside the form)</p>

<form accept-charset="UTF-8" action="/accreditations" class="lang_dropdown_form language" id="lang_dropdown_form_language" method="post" name="lang_dropdown_form_language">
    <div>
        <img alt="English" class="language-icon" height="12" src="http://scsglobalservices_mobile_june.dd:8083/sites/all/modules/contrib/languageicons/flags/en.png" title="English" width="16">

        <div class="form-item form-type-select form-item-lang-dropdown-select">
            <div class="scs-select">
                <select class="lang-dropdown-select-element form-select" id="lang-dropdown-select-language" name="lang_dropdown_select" style="width:165px">
                    <option selected="selected" value="en">
                        English
                    </option>

                    <option value="de">
                        Deutsch
                    </option>

                    <option value="pt-br">
                        Português
                    </option>

                    <option value="es">
                        Espa├▒ol
                    </option>
                </select>
            </div>
        </div>
        <input name="en" type="hidden" value="/accreditations">
        <input name="de" type="hidden" value="/de/accreditations">
        <input name="pt-br" type="hidden" value="/pt-br/accreditations">
        <input name="es" type="hidden" value="/es/accreditations">
        <noscript>&lt;div&gt; &lt;input type="submit" id="edit-submit" name="op" value="Go" class="form-submit" /&gt; &lt;/div&gt;
        </noscript>
        <input name="form_build_id" type="hidden" value="form-IpZgiF0U6WXF2LbQDnlwtEw2rz1lh2s6DMwGFTeumzE">
        <input name="form_id" type="hidden" value="lang_dropdown_form">
    </div>
</form>

Answer 1

This would work, but only with Chrome. jsFiddle

window.expand = function () { 
    var dropdown = document.getElementById('lang-dropdown-select-language');
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    dropdown.dispatchEvent(event);
};

Answer 2

Here's a thought - Give your lang-dropdown-select-language SELECT a low z-index and an absolute position in CSS. In your javascript set the size of it to 1 if its not already set that way:

($('#lang-dropdown-select-language').attr('size', value)

Then in your javascript create a new select with a higher z-index, display: none; and set the size to the number of options in your first select. Set the left and top to be the same as your first select. Attach an onchange event to the 2nd one. That function should set the selectedIndex of the 1st select to that of the 2nd, and then switch display:none on 2nd select.

Then in your onClick for your button make the 2nd one appear by setting display: block; in code.

Does this concept sound plausible?