Show Field and Hide or Remove Using Option Select

Memunculkan bidang baru pakai html option serta menyembunyikan atau bahkan menghapusnya dari daftar.

Yang perlu diingat, fungsi dari hide dan remove itu berbeda. Jika hide hanya menyembunyikan, maka remove benar-benar menghapusnya dan javascript atau css style akan ikut terhapus jika menggunakan remove.

Berikut kode singkat untuk menampilkan dan menyembunyikan elemen dengan option select

Pastikan Anda sudah menyimpan jQuery ini
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<select>
  <option>Pilih Tingkat Sekolah</option>
  <option>Sarjana</option>
  <option>SMA/ Sederajat</option>
  <option>SMP</option>
  <option>Lainnya</option>
</select>
<label id="ID_Khusus" style="display:none;">
Other:<input></input>
</label>
<script>
$(document).ready(function(){
    $('select').change(function(){
        if($('select option:selected').text() == "Lainnya"){
        $('#ID_Khusus').show();
        }
        else{
        $('#ID_Khusus').hide();
        }
    })
});
</script>


Untuk benar-benar menghapusnya, ganti hide() menjadi remove()

Popular posts from this blog

Ramalan Jodoh dan Pasangan Hidup Menurut Tanggal Lahir

Cara Mudah Ambil Uang di ATM BRI (+gambar)

Cara Mengetahui Hari Kelahiran Weton Jawa - Online