On this occasion, we will discuss about how to fill ComboBox automatically when another ComboBox selects data. The problem may be a simple problem for senior website developers. However, For us as a junior developer may even be a newbie (beginner) it is a pretty serious problem.
Fill in the ComboBox automatically when we select data on a ComboBox A, ComboBox B will fill the option according to the data selected on ComboBox A. For example, there are 3 (three) ComboBox with the name of Prov, Kab, and Kec. Where ComboBox Prov already filled list of provinces in Indonesia, while ComboBox Kab and Kec in empty state. When the ComboBox Prov selects the data, the ComboBox Kab will automatically fill while the ComboBox Kec is still empty. Then when ComboBox Kab selected data, then the ComboBox Kec will also automatically populate the data according to the data selected on ComboBox Kab.
How can we do to solve the above problem? JQuery is a JavaScript library that contains a collection of functions that help us in writing a code. By using jQuery above we can overcome it more easily.
To make ComboBox auto-complete, perform the following steps:
First, prepare jQuery that we will use its functions. If you have no friends yet, can download it HERE.
Next make a project website on web server friend. For example AppServ create a folder with the name COMBOBOX in the WWW folder or on the HTDOCS folder for XAMPP. In this discussion, the web server used is AppServ so the folder used is WWW.
Put the jquery file that has been downloaded into the folder.
Create an 'index.php' file in COMBOBOX folder then open it using notepad or notepad ++ or similar app then type the following code:
<html>
<head><title>suruhbelajar.blogspot.com</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var htmlobjek;
$(document).ready(function(){
//apabila terjadi event onchange terhadap object <select id=propinsi>
$("#propinsi").change(function(){
var propinsi = $("#propinsi").val();
$.ajax({
url: "ambilkota.php",
data: "propinsi="+propinsi,
cache: false,
success: function(msg){
//jika data sukses diambil dari server kita tampilkan
//di <select id=kota>
$("#kota").html(msg);
}
});
});
$("#kota").change(function(){
var kota = $("#kota").val();
$.ajax({
url: "ambilkecamatan.php",
data: "kota="+kota,
cache: false,
success: function(msg){
$("#kec").html(msg);
}
});
});
});
</script>
</head>
<body>
<?php
mysql_connect("localhost","root","admin");
mysql_select_db("indonesia");
?>
Pilih Provinsi :<br>
<select name="propinsi" id="propinsi">
<option>--Pilih Provinsi--</option>
<?php
//mengambil nama-nama propinsi yang ada di database
$propinsi = mysql_query("SELECT * FROM area where idkot='' ORDER BY nama");
while($p=mysql_fetch_array($propinsi)){
echo "<option value=\"$p[idprov]\">$p[nama]</option>\n";
}
?>
</select>
<br>Pilih Kabupaten/Kota :<br>
<select name="kota" id="kota">
<option>--Pilih Kabupaten/Kota--</option>
<?php
//mengambil nama-nama propinsi yang ada di database
$kota = mysql_query("SELECT * FROM area where idkot<>'' and idkec='' ORDER BY nama");
while($p=mysql_fetch_array($propinsi)){
echo "<option value=\"$p[idkab]\">$p[nama]</option>\n";
}
?>
</select>
<br>Pilih Kecamatan :<br>
<select name="kec" id="kec">
<option>--Pilih Kecamatan--</option>
</select>
</body>
</html>
Next, create a file 'capkota.php' in the COMBOBOX folder then open it and type in the following code:
<?php
mysql_connect("localhost","root","admin");
mysql_select_db("indonesia");
$propinsi = $_GET['propinsi'];
$kota = mysql_query("SELECT idkot,nama FROM area WHERE idprov='$propinsi' and idkec='' and idkot<>'' order by nama");
echo "<option>-- Pilih Kabupaten/Kota --</option>";
while($k = mysql_fetch_array($kota)){
echo "<option value=\"".$k['idkot']."\">".$k['nama']."</option>\n";
}
?>
Next, create a file 'capkecamatan.php' then open it and type in the following code:
<?php
mysql_connect("localhost","root","admin");
mysql_select_db("indonesia");
$kota = $_GET['kota'];
$kec = mysql_query("SELECT idkec,nama FROM area WHERE idkot='$kota' and idkec<>'' order by nama");
echo "<option>-- Pilih Kecamatan --</option>";
while($k = mysql_fetch_array($kec)){
echo "<option value=\"".$k['idkec']."\">".$k['nama']."</option>\n";
}
?>
Next, create a database on phpmysqmin under the name 'INDONESIA' then do the IMPORT database already provided HERE.
Open a friendly browser and type 'localhost/combobox' in the address bar and see the results.
The above reviews use a connection with configuration:
Server : localhost
User : root
Password: admin
Database : indonesia
Settings can be adjusted with a web server that has been installed on the computer all friends. For example full-source project code can be downloaded through links located in the middle of the article.
For critics, suggestions, and inquiries you can send your friends through the comments below. This review is the subjective opinion of a Trip Advisor thanks.
Password: suruhbelajar.blogspot.com
No comments:
Post a Comment