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:

    1. url, the URL for the Ajax Request
    2. value, the field that will be used as attribute value in option tag (<option value=”field”>)
    3. label, the field that will be used as a label in the option tag (<option value=”value-field”> label-field </ option>)
    4. 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>

Download the source and demo here

For another demo

  1. rizky
    June 6th, 2011 at 19:05 | #1

    misi..klo untuk memasukkn ke dtabase..valuenya yang mana ya?trim’s

  2. June 8th, 2011 at 16:24 | #2

    @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

  3. razerx
    February 1st, 2012 at 18:19 | #3

    thanks 4 this code…. how to make in update form get value from database??? plzz help me… so much

  4. February 5th, 2012 at 12:46 | #4

    @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 db
    if ($_POST["city_id"] == “”) $_POST["city_id"] = 2; // or get from db
    if ($_POST["district_id"] == “”) $_POST["district_id"] = 10; // or get from db

  5. June 18th, 2012 at 10:59 | #5

    mas kalo mau ganti dengan database yang lain mana saja yang diganti, trus contoh province_id pada tabel pada city, kenapa di table province cuman id saja. bisa dijelaskan mas?

  6. June 18th, 2012 at 22:25 | #6

    @imam
    ganti database di bagian ini :

    $link = mysql_connect('localhost', 'root', '');
    if (!$link) die('Could not connect: ' . mysql_error());
    mysql_select_db("dynamicombo",$link);

    saya punya kebiasaan, setiap tabel mempunyai field `id` untuk menandakan primary key yang auto_increment, field province_id pada table cities adalah foreign key yang menghubungkan dengan tabel provinces. karena table provinces tidak mempunyai ketergantungan dengan tabel lain maka hanya ada `id`.

  7. Erwiin
    August 10th, 2013 at 03:25 | #7

    Mas, source code dan demonya tidak bisa didownload. mohon diperbaiki.

  8. August 13th, 2013 at 12:07 | #8
  9. Erwiin
    August 15th, 2013 at 13:28 | #9

    Ok, terima kasih, mas

  10. Erwiin
    August 15th, 2013 at 13:40 | #10

    Mas, untuk demo yang satu lagi apakah bisa disediakan link downloadnya ?

  1. No trackbacks yet.