DynamiCombo
September 28th, 2010
DynamiCombo is a javascript class based on prototype.js for easily create an Ajax-based dynamic linked drop down menu.
How to use:
new DynamiCombo ( "root_id" , options );
root_id is the id of the root element, the options properties are:
- elements, is the child elements will be linked with the parent element.
each element has properties:- url, the URL for the Ajax Request
- value, the field that will be used as attribute value in option tag (<option value=”field”>)
- label, the field that will be used as a label in the option tag (<option value=”value-field”> label-field </ option>)
- init, the initial value of the option (<option value=”init_value”>)
- loadingImage, the location of the image file while processing
- loadingText, is the text being displayed when requesting
- debug, true/false/0/1
Example :
Filename: data.php
<?php
$link = mysql_connect('localhost', 'root', '');
if (!$link) die('Could not connect: ' . mysql_error());
mysql_select_db("dynamicombo",$link);
$req = $_GET["req"];
switch($req) {
case "c": // city
$sql = "select * from cities where province_id='".$_POST["province_id"]."'";
break;
case "d": // district
$sql = "select * from districts where province_id='".$_POST["province_id"]."' and city_id='".$_POST["city_id"]."'";
break;
}
$rows = mysql_query($sql,$link);
$data = "[";
$first = true;
while($row = mysql_fetch_assoc($rows)) {
if ($first) $first = false; else $data .= ",";
$data .= "{";
$data .= '"id":"'.$row["id"].'","name":"'.$row["name"].'"';
$data .= "}";
}
$data .= "]";
mysql_close($link);
echo $data;
?>
Filename: form.php
<?php
$link = mysql_connect('localhost', 'root', '');
if (!$link) die('Could not connect: ' . mysql_error());
mysql_select_db("dynamicombo",$link);
$rows = mysql_query("select * from provinces");
?>
<html>
<head>
<title>Dynamic Drop Down Menu</title>
<script src="prototype.js"></script>
<script src="dynamicombo.js"></script>
<script>
document.observe("dom:loaded",function(){
new DynamiCombo( "province_id" , {
elements:{
"city_id": {url:'data.php?req=c', value:'id', label:'name', init:'<?php echo $_POST["city_id"] ?>'},
"district_id":{url:'data.php?req=d', value:'id', label:'name', init:'<?php echo $_POST["district_id"] ?>'}
},
loadingImage:'loader1.gif',
loadingText:'Loading...',
debug:0
} )
});
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Province</td>
<td>
<select name="province_id" id="province_id">
<option value="">-- Select Province --</option>
<?php
while($row = mysql_fetch_assoc($rows)) {
$sel = ""; if ($_POST["province_id"] == $row["id"]) $sel = ' selected="selected"';
echo '<option value="'.$row["id"].'"'.$sel.'>'.$row["name"].'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td>City</td>
<td>
<select name="city_id" id="city_id">
<option value="">-- Select City --</option>
</select>
</td>
</tr>
<tr>
<td>District</td>
<td>
<select name="district_id" id="district_id">
<option value="">-- Select District --</option>
</select>
</td>
</tr>
</table>
<input type="submit"/>
</form>
</body>
</html>
misi..klo untuk memasukkn ke dtabase..valuenya yang mana ya?trim’s
@rizky value-nya yang didefinisikan di input select (contoh diatas: province_id, city_id, district_id). di demo sudah diberikan contoh lengkap insert dan update
thanks 4 this code…. how to make in update form get value from database??? plzz help me… so much
@razerx
according to the example, you can set the initial value from database to $_POST variable.
if ($_POST["province_id"] == “”) $_POST["province_id"] = 1; // or get from dbif ($_POST["city_id"] == “”) $_POST["city_id"] = 2; // or get from db
if ($_POST["district_id"] == “”) $_POST["district_id"] = 10; // or get from db