Chained Select (DHTMLSuite.chainedSelect)

DHTML Suite - article index

Specifications

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.

Advertisement:
LudoJS framework
dhtmlchess.com
Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com