Select Terkait (Chained Select) Menggunakan Jquery

Mungkin judulnya agak aneh ya. Maksudnya adalah field select yang lebih dari satu dan saling terkaitan. Karena seringkali dalam mengerjakan project mungkin terdapat lebih dari satu select option yang saling berkaitan. Cara klasik biasanya menggunakan javascript dengan fungsi onchange. Atau cara modern dengan menggunakan ajax. Namun kali ini cara yang menurut saya sangat sederhana namun powerfull, yaitu dengan menggunakan plugin jquery yang namanya jquery.chained.

Langsung saja, biasanya terdapat child select yang akan menampilkan berdasarkan parent select yang terpilih. Berikut contohnya. Contohnya ini saya ambil langsung juga dari tutorial

<select id="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

Berdasarkan html diatas terdapat dua select option. Yang sebagai parent adalah dengan id=mark dan sebagai child dengan id=series. Caranya cukup mudah, yaitu dengan menambahkan pada child dengan atribut class dengan value yang menunjukkan bahwa child tertentu termasuk ke dalam parent tertentu.

Ok selanjutnya anda cukup menambahkan pada javascript seperti ini:

$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark"); */

dan walah. Berhasil :)

Lalu bagaimana jika dalam child nya memiliki lebih dari satu parent, maka anda cukup menambahkan value ke dalam class dengan pemisahnya adalah spasi.

Anda dapat mendownload source atau minified. Atau bisa ke Chained in Github.

Cukup mudah kan. Selamat mencoba :)