如何隐藏选择框中的下拉列表？答案

【问题标题】：How to hide the dropdown list in a select box?如何隐藏选择框中的下拉列表？
【发布时间】：2013-03-01 02:51:17
【问题描述】：

我正在使用 JQuery 进行一个小的自定义下拉多选。

我正在做的是隐藏一个多选框，直到单击一个单独的选择框 - 以保持它所在的浏览器中的内容看起来是原生的。

但是，我试图让多选框看起来有点像普通选择框的一部分。

因此，您单击选择框，并且多个出现在它的正下方，似乎是它的一部分。

然后，当您进行选择并单击原始选择框时，多选框再次消失。

无论如何，这一切都很好，除了我在标准框中的单个选项一直出现在多选框的顶部。

我尝试使用 z-index 属性来解决此问题，但无济于事。

有没有办法隐藏下拉菜单，或者实质上禁用下拉菜单而不实际设置 disabled 属性？

【问题讨论】：

是在所有浏览器中发生还是仅在任何特定浏览器中发生？
所有浏览器，很遗憾。我开始认为我可以从标准选择中删除焦点以使下拉菜单消失，但是 .blur() 和 .focus() 没有做任何事情。

标签： javascript jquery css

【解决方案1】：

您不必禁用下拉菜单，如果您使用 jQuery，您可以简单地 .hide() 多选，它基本上将 style='' 属性设置为 display:none;。

$("#your_multiselect").hide(); // .show(); when you want to bring it back.

【讨论】：

我实际上为此使用了切换开关。但是我遇到的问题不在于 muliselect，而是原始选择中的实际下拉列表。标准选择的下拉菜单带有一个选项，可指示人们选择最多 3 个项目的下拉菜单，并位于多选的顶部。我希望这是有道理的。
我觉得我还不太明白。您能否提供应该发生的事情的屏幕截图或线框图？

【解决方案2】：

我最终做的是在原始选择框中没有任何选项，并且在多选中有一个禁用的选项，上面写着“最多选择 3 个”，所以人们仍然可以看到说明，但只有在点击之后。

它不是那么好，但它会工作。

【讨论】：

【解决方案3】：

您可以使用 CSS 隐藏选择框中的选项元素。因此，当您打开多选框时，您可以以编程方式隐藏第一个选择框中的选项。这将显示当前选择的值，但当您单击它时会隐藏所有选项。

下面是 CSS/HTML 的一个小技巧：
http://jsfiddle.net/LWPL3/

CSS

.hidden {
    display: none;
}

HTML

<select>
    <option class="hidden">Option 1</option>
    <option class="hidden">Option 2</option>
    <option class="hidden">Option 3</option>
</select>

从那里，只要你想隐藏它们，你就可以只 $(optionelements).addClass('hidden') 到主选择框中的选项元素。

【讨论】：