Show Field and Hide or Remove Using Option Select

Author : Sigit Purnomo | Released : December 17, 2015 | Category :
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()

Google+

Linkedin

Silahkan berkomentar sesuai topik yang dibahas