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

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

本文关键字：单击 显示 选项 选择 列表      更新时间：2023-09-26

我想创建以下功能：

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

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

棘手的部分是，我在无法更改 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>

这将起作用，但仅适用于Chrome。js小提琴

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);
};

这里有一个想法 - 给你的 lang-dropdown-select-language 选择一个低 z 索引和 CSS 中的绝对位置。 在你的javascript中，如果它还没有这样设置，请将其大小设置为1：

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

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

然后在您的on单击按钮中，通过设置显示：块;在代码中出现第二个按钮。

这个概念听起来合理吗？

相关文章：