Multi-level option group (optgroup)

[Mohamed Taraman]

Hello All,

I am trying to create a combobox using select2 which has 3 levels (Continent / Country / City)

we work with normal <select> it works good all levels are there (although no indentation)

But when add select2, only second and third level are displayed (first level (Continent) is not displayed )

normal select:

<select class="form-control">

<optgroup label="Africa">

<optgroup label="Egypt">

<option value="" style="margin-left:23px;">Alexandria</option>

<option value="">Cairo</option>

</optgroup>

<optgroup label="Morocoo">

<option value="">Casablanca</option>

<option value="">El Rabat</option>

</optgroup>

</optgroup>

<optgroup label="North America">

<optgroup label="USA">

<option value="">New York</option>

<option value="">Nashville</option>

</optgroup>

<optgroup label="Canada">

<option value="">Toronto</option>

</optgroup>

</optgroup>

</select>

select (using select2)

<select class="form-control select2">

<optgroup label="Africa">

<optgroup label="Egypt">

<option value="">Alexandria</option>

<option value="">Cairo</option>

</optgroup>

<optgroup label="Morocoo">

<option value="">Casablanca</option>

<option value="">El Rabat</option>

</optgroup>

</optgroup>

<optgroup label="North America">

<optgroup label="USA">

<option value="">New York</option>

<option value="">Nashville</option>

</optgroup>

<optgroup label="Canada">

<option value="">Toronto</option>

<option value="">Cairo</option>

</optgroup>

</optgroup>

</select>

select:

select2:

*note: I am using twitter bootstrap (just for styling)

thanks

Mohamed Taraman

[Kevin Brown]

Hi Mohamed,

Select2 does not support nested `<optgroup>` tags through HTML.  As you can see in your browser, it tries to flatten out the DOM.  Select2 does support this through array/AJAX data though.

https://github.com/ivaynberg/select2/issues/1744

-- 
Kevin Brown

--
You received this message because you are subscribed to the Google Groups "select2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
To post to this group, send email to sel...@googlegroups.com.
Visit this group at http://groups.google.com/group/select2.
For more options, visit https://groups.google.com/d/optout.

[arturo.m...@gmail.com]

Css: https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css
JS: https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js

<select id="mySelect" style="width: 400px">
</select>

var theData = [{
"id": "CEN",
"level": "C",
"dataid": "EN",
"text": "England",
"children": [{
"id": "RDEF",
"level": "R",
"dataid": "DEF",
"text": "Default Region",
"children": [{
"id": "D100",
"level": "D",
"dataid": "100",
"text": "Depot 100"
}, {
"id": "D125",
"level": "D",
"dataid": "125",
"text": "Depot 125"
}]
}, {
"id": "RNORTH",
"level": "R",
"dataid": "NORTH",
"text": "North Region",
"children": [{
"id": "D999",
"level": "D",
"dataid": "999",
"text": "Depot 999 - Head Office"
}]
}, {
"id": "RWEST",
"level": "R",
"dataid": "WEST",
"text": "West Region",
"children": [{
"id": "D555",
"level": "D",
"dataid": "555",
"text": "Depot 555"
}]
}]
}, {
"id": "CNL",
"level": "C",
"dataid": "NL",
"text": "Netherlands",
"children": [{
"id": "RNORTH",
"level": "R",
"dataid": "NORTH",
"text": "North Region",
"children": [{
"id": "DNL",
"level": "D",
"dataid": "NL",
"text": "Dutch Depot"
}]
}]
}]

$("#mySelect").select2({
placeholder: "Select Country, Region, Depot",
data: theData
});

[asfak....@gmail.com]

> select2: