Bootstrap-select: v1.14.0: Using optgroups doesnt render the dropdown (after bootstrap-select upgrade)
Hi,
Dropdowns using optgroup arent working.
when i remove them its fine. i get no console error nothing.
Before my upgrade it was fine.
I'm using v1.14-dev and using bootstrap 4.0 and this HTML:
<select id="ezcoa-541_address_ba_country" class="form-control ezcc-address_ba_country custom-select" data-live-search="true" data-size="10" name="new_instant_object[address_ba_country][]" tabindex="null">
<option value="">Bitte wählen...</option>
<optgroup label="Oft verwendet">
<option value="DE">Deutschland</option>
<option value="PL">Polen</option>
<option value="DK">Dänemark</option>
<option value="CZ">Tschechien</option>
<option value="AT">Österreich</option>
<option value="CH">Schweiz</option>
<option value="FR">Frankreich</option>
<option value="BE">Belgien</option>
<option value="NL">Holland</option>
<option value="ES">Spanien</option>
<option value="PT">Portugal</option>
<option value="IT">Italien</option>
<option value="GR">Griechenland</option>
<option value="SE">Schweden</option>
<option value="FI">Finnland</option>
<option value="NO">Norwegen</option>
<option value="GB">Großbritannien</option>
<option value="AU">Australien</option>
<option value="AR">Argentinien</option>
<option value="BR">Brasilien</option>
<option value="CA">Kanada</option>
<option value="RU">Russland</option>
<option value="US">Vereinigten Staaten von Amerika</option>
</optgroup>
<optgroup label="Weitere">
<option value="AF">Afghanistan</option>
<option value="AX">Alandinseln</option>
<option value="AL">Albanien</option>
<option value="DZ">Algerien</option>
<option value="UM">Amerikanisch-Ozeanien</option>
<option value="AS">Amerikanisch-Samoa</option>
<option value="VI">Amerikanische Jungferninseln</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarktis</option>
<option value="AG">Antigua und Barbuda</option>
<option value="AM">Armenien</option>
<option value="AW">Aruba</option>
<option value="AZ">Aserbaidschan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesch</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="MM">Birma (Myanmar)</option>
<option value="BO">Bolivien</option>
<option value="BA">Bosnien und Herzegowina</option>
<option value="BW">Botsuana</option>
<option value="BV">Bouvetinsel</option>
<option value="VG">Britische Jungferninseln</option>
<option value="IO">Britisches Territorium im Indischen Ozean</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgarien</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CK">Cookinseln</option>
<option value="CR">Costa Rica</option>
<option value="DM">Dominica</option>
<option value="DO">Dominikanische Republik</option>
<option value="DJ">Dschibuti</option>
<option value="EC">Ecuador</option>
<option value="MK">Ehemalige jugoslawische Republik Mazedonien</option>
<option value="SV">El Salvador</option>
<option value="CI">Elfenbeinküste</option>
<option value="ER">Eritrea</option>
<option value="EE">Estland</option>
<option value="FK">Falklandinseln</option>
<option value="FJ">Fidschi</option>
<option value="GF">Französisch-Guayana</option>
<option value="PF">Französisch-Polynesien</option>
<option value="TF">Französische Süd- und Antarktisgebiete</option>
<option value="FO">Färöer-Inseln</option>
<option value="GA">Gabun</option>
<option value="GM">Gambia</option>
<option value="GE">Georgien</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GD">Grenada</option>
<option value="GL">Grönland</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard- und McDonald-Inseln</option>
<option value="HN">Honduras</option>
<option value="HK">Hongkong</option>
<option value="IN">Indien</option>
<option value="ID">Indonesien</option>
<option value="IM">Insel Man</option>
<option value="IQ">Irak</option>
<option value="IR">Iran (Islamische Republik)</option>
<option value="IE">Irland</option>
<option value="IS">Island</option>
<option value="IL">Israel</option>
<option value="JM">Jamaika</option>
<option value="JP">Japan</option>
<option value="YE">Jemen</option>
<option value="JE">Jersey</option>
<option value="JO">Jordanien</option>
<option value="KY">Kaimaninseln</option>
<option value="KH">Kambodscha</option>
<option value="CM">Kamerun</option>
<option value="CV">Kap Verde</option>
<option value="KZ">Kasachstan</option>
<option value="QA">Katar</option>
<option value="KE">Kenia</option>
<option value="KG">Kirgistan</option>
<option value="KI">Kiribati</option>
<option value="CC">Kokosinseln</option>
<option value="CO">Kolumbien</option>
<option value="KM">Komoren</option>
<option value="CG">Kongo (Republik Kongo)</option>
<option value="HR">Kroatien</option>
<option value="CU">Kuba</option>
<option value="KW">Kuwait</option>
<option value="LA">Laos</option>
<option value="LS">Lesotho</option>
<option value="LV">Lettland</option>
<option value="LB">Libanon</option>
<option value="LR">Liberia</option>
<option value="LY">Libysch-Arabische Dschamahirija</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Litauen</option>
<option value="LU">Luxemburg</option>
<option value="MO">Macau</option>
<option value="MG">Madagaskar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysien</option>
<option value="MV">Malediven</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MA">Marokko</option>
<option value="MH">Marshall-Inseln</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauretanien</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexiko</option>
<option value="FM">Mikronesien</option>
<option value="MD">Moldau (Republik Moldau)</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolei</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MZ">Mosambik</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="AN">Netherlands Antilles</option>
<option value="NC">Neukaledonien</option>
<option value="NZ">Neuseeland</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NI">Nikaragua</option>
<option value="NU">Niue</option>
<option value="KP">Nordkorea</option>
<option value="NF">Norfolkinsel</option>
<option value="MP">Nördliche Marianen</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palästinensische Autonomiegebiete</option>
<option value="PA">Panama</option>
<option value="PG">Papua-Neuguinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippinen</option>
<option value="PN">Pitcairn</option>
<option value="PR">Puerto Rico</option>
<option value="ZA">Republik Südafrika</option>
<option value="RW">Ruanda</option>
<option value="RO">Rumänien</option>
<option value="RE">Réunion</option>
<option value="KN">Saint Kitts und Nevis</option>
<option value="ZM">Sambia</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tomé und Principe</option>
<option value="SA">Saudi-Arabien</option>
<option value="SN">Senegal</option>
<option value="RS">Serbien</option>
<option value="SC">Seychellen</option>
<option value="SL">Sierra Leone</option>
<option value="ZW">Simbabwe</option>
<option value="SG">Singapur</option>
<option value="SK">Slowakei (Slowakische Republik)</option>
<option value="SI">Slowenien</option>
<option value="SB">Solomon-Inseln</option>
<option value="SO">Somalia</option>
<option value="LK">Sri Lanka</option>
<option value="BL">St. Barthélemy</option>
<option value="SH">St. Helena</option>
<option value="LC">St. Lucia</option>
<option value="MF">St. Martin</option>
<option value="PM">St. Pierre und Miquelon</option>
<option value="VC">St. Vincent und die Grenadinen</option>
<option value="VA">Staat der Vatikanstadt</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard und Jan Mayen</option>
<option value="SZ">Swasiland</option>
<option value="SY">Syrien</option>
<option value="GS">Südgeorgien und die Südlichen Sandwichinseln</option>
<option value="KR">Südkorea</option>
<option value="TJ">Tadschikistan</option>
<option value="TW">Taiwan</option>
<option value="TZ">Tansania</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad und Tobago</option>
<option value="TD">Tschad</option>
<option value="TN">Tunesien</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks- und Caicosinseln</option>
<option value="TV">Tuwalu</option>
<option value="TR">Türkei</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="HU">Ungarn</option>
<option value="UY">Uruguay</option>
<option value="UZ">Usbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela</option>
<option value="AE">Vereinigte Arabische Emirate</option>
<option value="VN">Vietnam</option>
<option value="WF">Wallis und Futuna</option>
<option value="CX">Weihnachtsinsel</option>
<option value="EH">Westsahara</option>
<option value="CD">Zaire</option>
<option value="CF">Zentralafrikanische Republik</option>
<option value="CY">Zypern</option>
<option value="EG">Ägypten</option>
<option value="GQ">Äquatorialguinea</option>
<option value="ET">Äthiopien</option>
</optgroup>
</select>
giRobert
All 6 comments
all options from optgroup are not displayed. they dont exist in bootstrap-select html
giRobert
on 10 Jan 2021
The same problem
smartcorestudio
on 22 Jan 2021
It seems to be working correctly for me: https://plnkr.co/edit/dSKcVahe5w9XQgUd.
For this project, and other open source projects you may contribute to in the future, please be sure to read the contributing guidelines.
Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case (you can use our preconfigured Plunker), and report back with:
- your link
- Bootstrap version
- bootstrap-select version
- specific browser and OS details.
If you're not using the latest version of bootstrap-select, please try that as well.
caseyjhol
on 27 Mar 2021
In your plunk you're using v1.13.18 and everything is OK. The problem is in 1.14. I've updated only Bootstrap Select version in your plunk.
You can compare your plunk (v 1.13.18): https://plnkr.co/edit/dSKcVahe5w9XQgUd
with the updated one (v1.14.0-beta2): https://plnkr.co/edit/kZLrPK9aj7BwdviX
Tested in Chrome and Firefox.
I think #2592 describes the same issue
smartcorestudio
on 29 Mar 2021
I Fixed, change this
addOptgroup.call(this, startIndex, selectOptions);
for
addOptgroup.call(this, i, selectOptions);
in the no minify version
Raul-Gallardo
on 29 Mar 2021
👍2
🎉1
Duplicate of #2607.
caseyjhol
on 30 May 2021
Was this page helpful?
0 / 5 - 0 ratings
Related issues
qiyuan4f
·
4Comments
alex-piccione
·
4Comments
neuropass
·
3Comments
spyhunter88
·
4Comments
dw00001
·
3Comments
Most helpful comment
I Fixed, change this
addOptgroup.call(this, startIndex, selectOptions);
for
addOptgroup.call(this, i, selectOptions);
in the no minify version