Question

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

我正在做的是隐藏一个多选框，直到单击一个单独的选择框 - 让它在浏览器中保持原生状态。

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

所以，你点击选择框，它就会出现在它下面，似乎是它的一部分。

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

无论如何，这一切都很有效，除了标准框内的单个选项一直显示在多个选择框的顶部。

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

有没有办法隐藏下拉列表，或者实际上是在没有实际设置禁用属性的情况下禁用下拉列表？

Answer 1

您不必禁用下拉菜单，如果您正在使用jQuery，则只需.hide()多选，这基本上将style=''属性设置为display:none;

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

Answer 2

我最终做的是在原始选择框中没有选项，并且在多选中显示“选择最多3”的禁用选项，这样人们仍然可以看到说明，但只有在点击后才能看到。< / p>

它不是那么好，但它会起作用。

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

从那里，只要$（选项元素）.addClass（'hidden'）就可以隐藏主选择框中的选项元素。

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

3 个答案: