Promo Lebaran, Kelas Online CODEPOLITAN Cukup Bayar Setengah Harga KLAIM PROMO

Combo Box (Option)

Ditanyakan pada tanggal 8 November 2019 oleh Denna Dwi Cahyanto Edit  Hapus  Buka Kembali  Tandai 

apakah ada contoh untuk combo box dalam combo box ? misalkan saya select opsi pertama provinsi DKI Jakarta, lalu opsi kedua akan muncul nama" kota di jakarta.

Terima Kasih

2 JAWABAN / 4 KOMENTAR

User avatar
Muchamad syariful umam menjawab pada tanggal 9 November 2019 Batalkan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

mungkin ini bisa jadi referensi link

User avatar
Ahmad Oriza menjawab pada tanggal 13 November 2019 Batalkan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

Bisa dengan cara menggunakan Javascript mas. Salah satunya dengan Jquery. Kalau murni HTML saja tidak bisa dinamis.

Saya coba contohkan tanpa database ya. Scriptnya seperti ini :

Bikin file baru dengan nama DemoSelectDinamis.html lalu coba script ini :

<form action="something.php" method="post">

<div>
<label>Pilih provinsi :</label>
<select id="province" name="province">
  <option value="DKI Jakarta">DKI Jakarta</option>
  <option value="Jawa Barat">Jawa Barat</option>
</select>
</div>

<div>
<label>Pilih kota :</label>
<select id="city" name="city">
    <option value="">Pilih ..</option>
</select>
</div>

</form>

<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

<script>
$(document).ready(function(){
    $('#province').change(function() {
        let province = $(this).val();

        $('#city').html('');

        if (province == 'Jawa Barat') {
            $('#city').append(`<option value="Bandung">Bandung</option>`);
            $('#city').append(`<option value="Garut">Garut</option>`); 
        } else if (province == 'DKI Jakarta') {
            $('#city').append(`<option value="Jakarta Utara">Jakarta Utara</option>`);   
            $('#city').append(`<option value="Jakarta Barat">Jakarta Barat</option>`);  
        }
    });
});
</script>

Selamat mencoba!