Reputation:
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.
Upvotes: 2
Views: 8337
Reputation: 6888
You should create a custom dropdown for this purpose. Here are the steps:
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">
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>
Style this newly created ul as per your needs
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
});
Upvotes: 1
Reputation: 1373
You cant go any deeper. It is not allowed for the optgroup. Read this: http://www.w3.org/TR/html401/interact/forms.html#h-17.6
Upvotes: 0
Reputation: 43
Or just put one or more spaces -   - before your text in the option.
Upvotes: 2