Question

我在选择框中显示以下类别：

<form>
    <select class="favoritefood">
        <optgroup label="Dairy products">
            <option>Cheese</option>
            <option>Egg</option>

        </optgroup>
        <optgroup label="Vegetables">
            <option>Cabbage</option>
            <option>Lettuce</option>
            <option>Beans</option>
            <option>Onions</option>
            <option>Courgettes</option>

        </optgroup>
    </select>
</form>

有没有办法让另一个级别下降，即子类别？我尝试在optgroup中使用optgroup，但它不起作用。

Answer 1

您应该为此目的创建自定义下拉列表。以下是步骤：

使用CSS隐藏原始下拉列表（显示：无;）或创建一个隐藏字段，其中包含用户选择的值

<input type="hidden" name="selection" id="selection">

使用尽可能多的嵌套li和sub ul

创建无序列表（ul）

<ul class="custom-drop">
    <li class="option-group">
         <ul>
            <li class="heading">Vegetables</li>
            <li>Cabbage</li>
         </ul>
    </li>
    <li class="option-group">
         <ul>
            <li class="heading">Dairy products</li>
            <li>Cheese</li>
         </ul>
    </li>
</ul>

根据您的需要为新创建的ul设置样式
在此ul中侦听li上的click事件，并在隐藏下拉列表中设置相应的选项或设置隐藏字段的值，以便可以使用表单发送。

因此，如果您使用的是jQuery，那么请执行以下操作：

$('body').on('click', '.custom-drop li', function() {
    $('#selection').val($(this).text());
    // Probably you want to handle showing/hiding the custom drop here
});

Answer 2

或者只是在选项中的文字前加上一个或多个空格 - ＆amp; nbsp。

Answer 3

你不能再深入了解。 optgroup不允许这样做。阅读：http://www.w3.org/TR/html401/interact/forms.html#h-17.6

在HTML选择框中显示子类别

3 个答案: