Menu
Is it possible to have multiple layers of optgroup on select2?
Basically, an optgroup inside another optgroup.
<select>
<optgroup label="Level_1">
<optgroup label="Level_2">
<option value="option_1">option_1</option>
<option value="option_2">option_2</option>
</optgroup>
</optgroup>
</select>
Fiddle
Thank you.
552
Nested optgroups are not supported in html, But you can use JavaScript to create them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
$(document).ready(function () {
$('#NestedOptGroups').select2({
data: [
{
text: 'Level_1', children: [
{
text: 'Level_2', children: [
{id: 'Level2Opt0', text: 'Sub Option 1'},
{id: 'Level2Opt1', text: 'Sub Option 2'}
]
},
{id: 'Level1Opt0', text: 'Main Level option 1'}
]
}
]
});
});
</script>
</head>
<body>
<input class="select2" id="NestedOptGroups" placeholder="select one"/>
</body>
</html>
Try like this:
<select>
<optgroup label="Level_1">
<optgroup label=" Level_2">
<option value="option_1"> option_1</option>
<option value="option_2"> option_2</option>
</optgroup>
</optgroup>
</select>
Check this Demo
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
