Chained Select (DHTMLSuite.chainedSelect)
Specifications
- Widget/Class name: DHTMLSuite.chainedSelect
- Demo: demo-chained-select.html
Configuration
To use this script, include the contextMenu widget with lines like this:
<table cellpadding="5" cellspacing="5">
<tr>
<td>county</td>
<td>
<select id="country">
<option>select a country</option>
<option value="turkey">Turkey</option>
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
</select>
</td>
</tr>
<tr>
<td>city</td>
<td>
<select id="city"></select>
</td>
</tr>
<tr>
<td>universty</td>
<td>
<select id="university"></select>
</td>
</tr>
</table>
<script type="text/javascript">
chainedSelects = new DHTMLSuite.chainedSelect(); // Creating object of class DHTMLSuite.chainedSelects
chainedSelects.addChain('country','city','includes/getCities.php');
chainedSelects.addChain('city','university','includes/getUniversities.php');
chainedSelects.init();
</script>
Here, we have three select boxes. the addChain method connects one select box with another. The "country" select box is connected with the "city" box, and the "city" box has been connected with the "university" box.
When someone chooses a country inside the country select box, a call will be made to getCities.php which will list availabale cities inside that country in the "city" select box. The same applies to the "city" select box.
This is how the getCities.php file look like in the demo:
<?
header("Content-Type: text/html;charset=iso-8859-1");
switch ( $_GET['dg_key']) {
case "turkey" : echo "Ankara;06 | Istanbul;34 | Antalya;07"; break;
case "denmark": echo "Aalborg;11 | Copenhagen;22 | Odense;33"; break;
case "norway" : echo "Bergen;44 | Oslo;55 | Stavanger;66"; break;
default : echo "no item";
}
?>
You will typically use a SQL query in this file in order to filter out cities.
