Dynamic Dependent Select Box means whenever there is selected value in the “parent” box, the “child” box will fit its options value according to the value of “parent” box. It can be illustrated like this. Say, we have “country” select box and “city” select box. If we choose “Indonesia” in the “country” select box, the “city” select box will only show some cities located in Indonesia like “Jakarta”,”Semarang” and “Bandung”. It won’t show “Sydney”,”Amsterdam”,”Hamburg” and so on.
In This tutorial we are gonna make simple application to perform Dynamic Dependent Select Box.
Database Structure
This database consists of two tables, country and city
country table
|
1 2 3 4 5 6 |
+-------+-------------+------+-----+---------+---------------+ | Field | Type | Null | Key | Default | Extra | +-------+-------------+------+-----+---------+---------------+ | id | int(5) | NO | PRI | NULL |auto_increment | | name | varchar(30) | NO | | NULL | | +-------+-------------+------+-----+---------+---------------+ |
city table
|
1 2 3 4 5 6 7 |
+------------+-------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +------------+-------------+------+-----+---------+----------------+ | id | int(5) | NO | PRI | NULL | auto_increment | | name | varchar(30) | NO | | NULL | | | id_country | int(5) | NO | MUL | NULL | | +------------+-------------+------+-----+---------+----------------+ |
and this is table relationship that needs to be connected in our sample Dynamic Dependent Select Box
selectbox.php
This PHP file is used as an html form and also execute client side programming, which is jQuery to perform dynamic dependent select box
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#country").change(function(){ var country=$("#country").val(); $.ajax({ type:"post", url:"getcity.php", data:"country="+country, success:function(data){ $("#city").html(data); } }); }); }); </script> </head> <body> Country : <select name="country" id="country"> <option>-select your country-</option> <?php include "db.php"; $result=mysql_query("SELECT id,name from country order by name"); while($country=mysql_fetch_array($result)){ echo "<option value=$country[id]>$country[name]</option>"; } ?> </select> City : <select name="city" id="city"> <option>-select your city-</option> </select> </body> </html> |
getcity.php
|
1 2 3 4 5 6 7 8 9 10 |
<?php include "db.php"; $country=$_POST["country"]; $result=mysql_query("select id,name FROM city where id_country='$country' "); while($city=mysql_fetch_array($result)){ echo"<option value=$city[id]>$city[name]</option>"; } ?> |
db.php
|
1 2 3 4 |
<?php mysql_connect("localhost","root",""); mysql_select_db("php_dependentselectbox"); ?> |
Screenshot
Can we dynamically show check boxes instead of drop down so that the result will be based on selected check boxes.
Thanks for this article. You can also see an updated article on Dynamic Dependent Select Box using PHP and Ajax here: https://www.discussdesk.com/dynamic-dependent-select-box-using-jquery-ajax-and-php.htm