强制选择列表的所有选项在单击时显示为展开答案

【问题标题】：Force all options of a select list to appear as expanded on click强制选择列表的所有选项在单击时显示为展开
【发布时间】：2015-08-28 20:23:03
【问题描述】：

我想创建以下功能：

用户单击一个按钮（任何按钮都可以），然后会出现一个选择列表，其中包含在按钮下方的向下滑动窗口中展开的所有选项。

我知道如何制作幻灯片窗口和所有这些，但我还没有找到任何关于如何使选择列表显示为在给定点击事件的情况下展开的信息。

棘手的部分是，我在无法更改 html 的 CMS 上下文中工作，因此我必须仅使用 jQuery 实现解决方案。

这是表单的代码。

<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>

【问题讨论】：

标签： javascript jquery html frontend jquery-events

【解决方案1】：

这可行，但仅适用于 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);
};

【讨论】：

【解决方案2】：

这里有一个想法 - 给你的 lang-dropdown-select-language SELECT 一个低 z-index 和一个 CSS 中的绝对位置。在您的 javascript 中将其大小设置为 1（如果尚未设置）：

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

然后在您的 javascript 中创建一个具有更高 z-index 的新选择，显示：无；并将大小设置为您第一次选择的选项数。将左侧和顶部设置为与您的第一个选择相同。将 onchange 事件附加到第二个事件。该函数应将第一次选择的 selectedIndex 设置为第二次选择的，然后在第二次选择时切换 display:none。

然后在您的 onClick 按钮中，通过设置 display: block; 使第二个出现在代码中。

这个概念听起来合理吗？

【讨论】：