contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Menampilkan data Berdasarkan Selectbox dg Javascript

Posted in Javascript Jquery Life at 31 Desember 2016 With 0 Comments

Tutorial Kali ini admin akan menjelaskan Cara Menampilkan data Berdasarkan Combobox dengan javascript , Jadi disini jika kita Memilih data di selecbox maka data yang lainnya akan muncul di id tertentu (lihat pada artikel Menampilkan Data di Textbox Berdasarkan Combobox),Jika dalam bahasa pemograman PHP yang memiliki perintah echo atau print untuk menampilkan hasil program ke dalam web browser, JavaScript tidak menyediakan perintah sederhana untuk menampilkan hasil program ke dalam web browser. Namun ini akan sama dengan delphi, vb, dan pascal,, tidak jauh berbeda

Cara Menampilkan Hasil Form HTML dengan JavaScript

Berikut ini merupakan contoh dimana Jika saya memilih Kategori di selectbox, maka data tersebut akan Tampil, Dengan menggunakan code Javascript Seperti ini kita juga dapat menampilkan sub kategori di combobox berdasarkan combobox yang dipilihnya, untuk tutorial ini berikut contoh dan code HTML nya :

▼ Download Source Code Dibawah Ini ▼



menampilkan data berdasarkan selectbox javascript

CODE HTML :

<!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="Anda Memilih <b>Makanan</b>";
    }
  else if (nama_kota=="minuman")
    {
        document.getElementById("tampil").innerHTML="Anda Memilih <b>Minuman</b>";
    }
}
</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>
</form>
<br/><br/>
<div id="tampil"></div>
</body>
</html>

Artikel Terkait

Diskusi