javascript - Display subcategories in HTML select box - Stack Overflow

admin管理员组

文章数量:1405918

I have the following categories displayed in a select box:

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

Is there any way to go another level down, ie, a subcategory? I've tried using optgroup inside optgroup but it doesn't work.

I have the following categories displayed in a select box:

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

Is there any way to go another level down, ie, a subcategory? I've tried using optgroup inside optgroup but it doesn't work.

• javascript
• html

Share Improve this question Follow asked Feb 26, 2014 at 22:09 user882670user882670 1

• 2 <select> is pretty bare-bones. You may want to consider a List-based apprach, such as the one used in Bootstrap. getbootstrap./ponents/#dropdowns – Diodeus - James MacFarlane Commented Feb 26, 2014 at 22:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Or just put one or more spaces - &nbsp - before your text in the option.

You should create a custom dropdown for this purpose. Here are the steps:

1. Hide the original dropdown with CSS (display:none;) OR create a hidden field that will contain the value selected by the user

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

2. Create a unordered list (ul) with as many nested li and sub 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>
   

3. Style this newly created ul as per your needs

4. Listen for the click event on li inside this ul and set the appropriate option inside the hidden dropdown OR set the value of hidden field so that it can be sent with the form.

So if you are using jQuery then do something like this:

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

You cant go any deeper. It is not allowed for the optgroup. Read this: http://www.w3/TR/html401/interact/forms.html#h-17.6

本文标签： javascriptDisplay subcategories in HTML select boxStack Overflow