Membuat Pilihan berdasarkan Kategori Combobox yg Dipilih

Publish Date : 02-01-2017 , dibaca 33585 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial kali ini kita akan membahas cara menampilkan code HTML dengan javascript, jadi disini kita akan membuat pilihan kategori dan sub kategori di dalam HTML , dengan catatan sub kategori akan tampil jika data kategori sudah kita pilih.. nah ini tentunya membutuhkan suatu logika bukan..

Contoh : Dalam Kategori "minuman" ada sub kategori seperti " Teh, Copy , Jus , dll" , sedangkan dalam kategori "makanan" ada sub kategori "Nasi Goreng , Ayam Penyet, Pecel dll" , kondisi ini membuat kita harus menampilkan data berdasarkan combobox yang kita pilih , dan ditampilkan dalam bentuk pilihan combobox juga .

Combobox ini tidak dinamis , karna datanya tidak diambil dari database, namun ini merupakan combobox yang mempunyai keterkaitan atau saling berhubungan

Untuk Kasus Menampilkan Data Seperti ini kita bisa memanfaatkan javascript, berikut contoh gambarnya :

Cara Menampilkan pilihan di combobox berdasarkan combobox yang dipilih :

cara disini kita menggunakan .innerHTML di Javascript untuk menampilkan code HTML option di selectbox , berikut contoh nya :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
<script>
function tampilkan(){
  var nama_kota=document.getElementById("form1").kategori.value;
  if (nama_kota=="makanan")
    {
        document.getElementById("tampil").innerHTML="<option value='Nasi Goreng'>Nasi Goreng</option><option value='Bakso'>Bakso</option>";
    }
  else if (nama_kota=="minuman")
    {
        document.getElementById("tampil").innerHTML="<option value='Teh'>Teh</option><option value='Copy'>Copy</option>";
    }
}
</script>
</head>
<body>
<h2>Suckittrees.com</h2>
<form id="form1" name="form1" onsubmit="return false">
  <label>Pilih Kategori: </label>
  <select id="kategori" name="kategori" onchange="tampilkan()">
    <option value="makanan">makanan</option>
    <option value="minuman">minuman</option>
  </select>
  <br/><br/>
   <label>Pilih Sub Kategori: </label> <select id="tampil" name="tampil">
  </select>
</form>

</body>
</html>