Nested Dropdown

Cascading, or dependent, sometime called nested drop down is a common requirement in web applications in which a select box contents depend on the value in a parent select box. PHP Autocomplete supports nested drop down out of box, unlimited level. With set_child() method, the implementation is straight forward. Everything is done AJAX style, no page ever refreshes.

<?php
$pac6_1 = new C_PhpAutocomplete('country');
$pac6_2 = new C_PhpAutocomplete('state');
$pac6_3 = new C_PhpAutocomplete('city');

$pac6_1->set_child($pac6_2, 'countryStateData');
$pac6_2->set_child($pac6_3, 'stateCityData');

$pac6_1->display('SELECT');
$pac6_2->display();
$pac6_3->display();
?>
Country:
<select name="country" id="country" style="width:100px">
<option></option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>
State:
<input id="state" type="hidden" style="width:300px"/>
City:
<input id="city" type="hidden" style="width:300px"/>

The key is in data array “countryStateData” and “stateCityData”. The value of the selected value of a parent select box is used as the index value to its child select box.

<?php
$countryStateData =
array(
'usa' => array(
array('id'=>'ca', 'text'=>'CA'),
array('id'=>'al', 'text'=>'AL'),
array('id'=>'nj', 'text'=>'NJ')
),
'canada' => array(
array('id'=>'ab', 'text'=>'AB'),
array('id'=>'qc', 'text'=>'QC'),
array('id'=>'bc', 'text'=>'BC')
)
);

$stateCityData =
array(
'ca' => array(
array('id'=>'ca', 'text'=>'San Francisco'),
array('id'=>'al', 'text'=>'Los Angeles'),
array('id'=>'nj', 'text'=>'San Diego')
),
'al' => array(
array('id'=>'ab', 'text'=>'test'),
array('id'=>'qc', 'text'=>'test2'),
array('id'=>'bc', 'text'=>'city2')
),
'bc' => array(
array('id'=>'ab', 'text'=>'2342344'),
array('id'=>'qc', 'text'=>'bc city2'),
array('id'=>'bc', 'text'=>'bc city333')
)
);
echo '<script>';
echo 'var countryStateData = '. json_encode($countryStateData).";\n";
echo 'var stateCityData = '. json_encode($stateCityData).";\n";
echo '</script>';
?>

Below is the JavaScript generated from above