Tutorial kali ini kita akan membahas Cara Menampilkan data di combobox / select berdasarkan group atau master kategori, jadi ada tingkatannya ... Tutorial dan panduan mengenai element <optgroup>...</optgroup> yang digunakan untuk meng-grup beberapa opsi dari daftar pilihan yang akan diberikan. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <optgroup>.

HTML <optgroup> element digunakan untuk mengelompokkan beberapa item (option) didalam daftar pilihan (<select> element). Kelompok (group) dapat diberi label tertentu dengan menggunakan attribute label. Untuk lebih jelasnya.. perhatikan gambar dibawah ini :

Penulisan element <optgroup> harus terletak secara langsung didalam element <select>, dan element <option> terletak langsung didalam element <optgroup>.

Menampilkan Group kategori di Select

CODE HTML :

<select name="browser">

    <optgroup label="Firefox">
      <option value="2.0 or higher">
        Firefox 2.0 or higher
      </option>
      <option value="1.5.x">Firefox 1.5.x</option>
      <option value="1.0.x">Firefox 1.0.x</option>
    </optgroup>

    <optgroup label="Microsoft Internet Explorer">
      <option value="7.0 or higher">
        Microsoft Internet Explorer 7.0 or higher
      </option>
      <option value="6.x">Microsoft Internet Explorer 6.x</option>
      <option value="5.x">Microsoft Internet Explorer 5.x</option>
      <option value="4.x">Microsoft Internet Explorer 4.x</option>
    </optgroup>

    <optgroup label="Opera">
      <option value="9.0 or higher">Opera 9.0 or higher</option>
      <option value="8.x">Opera 8.x</option>
      <option value="7.x">Opera 7.x</option>
    </optgroup>

    <option>Safari</option>
    <option>Other</option>

</select>