Menampilkan data Berdasarkan Selectbox dg Javascript

Publish Date : 06-04-2019 , dibaca 27727 kali, Hari ini dibaca : 2 kali ,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 :

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>

Contoh Dengan Jquery :

<!DOCTYPE html>    
<html lang="en">    
<head>    
  <meta charset="utf-8">    
  <title>change demo</title>    
  <style>    
  div {    
    color: red;    
  }    
  </style>    
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    
</head>    
<body>    
 <select id="se" name="actors" >    
  <option>Uthappa</option>    
  <option selected="selected">Kattapa</option>    
  <option>Veerappa</option>    
  <option>Bahubali</option>    
  <option>Bhallal Dev</option>    
  <option>Awantika</option>    
</select>    
<div id="loc"></div>    
 <script>    
$( "select" ) .change(function () {    
document.getElementById("loc").innerHTML="You selected: "+document.getElementById("se").value;  
});  
</script>    
 </body>    
</html>