Bu makalemizde HTML5 ile beraber gelen yeniliklerden biri olan açılır liste elemanlarını gruplamayı göreceğiz belkide en gerekli veya en sık kullanılabilecek yeniliklerden biri diyebiliriz makalemizin devamında ayrıntılı bilgi ve örneğe ulaşabilirsiniz.
HTML5 optgroup ile liste elemanlarını gruplama
Optgroup’un örnek kullanımı şu şekilde olacak
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <select> Seçiniz <optgroup label="ADANA"> <option value="ADANA">ADANA-MERKEZ</option> <option value="ALADAĞ">ALADAĞ</option> <option value="CEYHAN">CEYHAN</option> <option value="ÇUKUROVA">ÇUKUROVA</option> <option value="FEKE">FEKE</option> <option value="İMAMOĞLU">İMAMOĞLU</option> <option value="KARAİSALI">KARAİSALI</option> <option value="KARATAŞ">KARATAŞ</option> <option value="KOZAN">KOZAN</option> <option value="POZANTI">POZANTI</option> <option value="SAİMBEYLİ">SAİMBEYLİ</option> <option value="SARIÇAM">SARIÇAM</option> <option value="SEYHAN">SEYHAN</option> <option value="TUFANBEYLİ">TUFANBEYLİ</option> <option value="YUMURTALIK">YUMURTALIK</option> <option value="YÜREĞİR">YÜREĞİR</option> </optgroup> <optgroup label="ADIYAMAN"> <option value="ADIYAMAN">ADIYAMAN-MERKEZ</option> <option value="BESNİ">BESNİ</option> <option value="ÇELİKHAN">ÇELİKHAN</option> <option value="GERGER">GERGER</option> <option value="GÖLBAŞI-ADIYAMAN">GÖLBAŞI-ADIYAMAN</option> <option value="KAHTA">KAHTA</option> <option value="SAMSAT">SAMSAT</option> <option value="SİNCİK">SİNCİK</option> <option value="TUT">TUT</option> </optgroup> <optgroup label="AFYONKARAHİSAR"> <option value="AFYONKARAHİSAR">AFYONKARAHİSAR-MERKEZ</option> <option value="BAŞMAKCI">BAŞMAKCI</option> <option value="BAYAT-AFYONKARAHİSAR">BAYAT-AFYONKARAHİSAR</option> <option value="BOLVADİN">BOLVADİN</option> ... <option value="SİNANPAŞA">SİNANPAŞA</option> <option value="SULTANDAĞI">SULTANDAĞI</option> <option value="ŞUHUT">ŞUHUT</option> </optgroup> </select> |
Üstteki illere ait kodun tam hali olarak sonuc’unu görmek için alttaki result sekmesinden kolayca ulaşabilirsiniz.
Sonuç
