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()
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini