Menghapus option dari elemen select menggunakan jQuery

Contoh Kasus:

Saya mempunyai aplikasi cuti yang memerlukan approval dari HRD dan atasan lainnya seperti terlihat pada gambar dibawah ini:

Keterangan:

  • Jadi semua data  approval diatas berasal dari tabel user dimana tipenya adalah nama-nama HRD dan atasan lainnya.

Permasalahan:

Jika saya sudah memilih satu nama di approval ke-1 maka di approval ke-2 dan ke-3 nama tersebut masih muncul.

Pertanyaan:

Bagaimana agar nama yang sudah saya pilih pada approval ke-1 tidak tampil lagi pada approval ke-2 dan ke-3 … ?

Jawaban:

Kamu bisa gunakan kode berikut ini:

<script type=”text/javascript”> 

function periksaApproval2(){

var app1=$(‘#ltr_a1_by’).val()

if(app1>0){

$(“#ltr_a2_by option[value='”+app1+”‘]”).remove();

$(“#ltr_a3_by option[value='”+app1+”‘]”).remove();

}

}

</script>

<select name=”ltr_a1_by”  id=”ltr_a1_by” onChange=”periksaApproval2()”>

<option value=”0″>___________Approval 1_____________</option>

<option value=”158″>DR06FAHMI (Fahmi Basya)</option>

<option value=”159″>DR07SAHIDATINA (SAHIDATINA)</option>

</select>

<select name=”ltr_a2_by”  id=”ltr_a2_by” >

<option value=”0″>___________Approval 2_____________</option>

<option value=”158″>DR06FAHMI (Fahmi Basya)</option>

<option value=”159″>DR07SAHIDATINA (SAHIDATINA)</option>

</select>

<select name=”ltr_a3_by”  id=”ltr_a3_by” >

<option value=”0″>___________Approval 3_____________</option>

<option value=”158″>DR06FAHMI (Fahmi Basya)</option>

<option value=”159″>DR07SAHIDATINA (SAHIDATINA)</option>

</select>

Keterangan:

  • <select name=”ltr_a1_by”  id=”ltr_a1_by” onChange=”periksaApproval2()”>, Kode ini berarti saat user sudah memilih salah satu nilai pada approval ke-1 maka fungsi periksaApproval2() dijalankan.
  • var app1=$(‘#ltr_a1_by’).val(), Kode ini digunakan untuk mengambil nilai dari approval ke-1 yang sudah kita pilih.
  • $(“#ltr_a2_by option[value='”+app1+”‘]”).remove(), Kode ini digunakan untuk menghapus option yang mempunyai value sama dengan isi dari variabel app1 dari elemen yang mempunyai id=”ltr_a2_by”.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *