Cascading/Dynamic Dependent/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"/>
$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>';
?>
$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
<script>
var countryStateData =
{
"usa": [
{
"id": "ca",
"text": "CA"
},
{
"id": "al",
"text": "AL"
},
{
"id": "nj",
"text": "NJ"
}
],
"canada": [
{
"id": "ab",
"text": "AB"
},
{
"id": "qc",
"text": "QC"
},
{
"id": "bc",
"text": "BC"
}
]
};
var stateCityData =
{
"ca": [
{
"id": 0,
"text": "San Francisco"
},
{
"id": 1,
"text": "Los Angeles"
},
{
"id": 2,
"text": "San Diego"
}
],
"al": [
{
"id": 0,
"text": "test"
},
{
"id": 1,
"text": "test2"
},
{
"id": 2,
"text": "city3"
}
],
"bc": [
{
"id": 0,
"text": "2342344"
},
{
"id": 1,
"text": "23452345254"
},
{
"id": 2,
"text": "34345"
}
]
};
</script>
var countryStateData =
{
"usa": [
{
"id": "ca",
"text": "CA"
},
{
"id": "al",
"text": "AL"
},
{
"id": "nj",
"text": "NJ"
}
],
"canada": [
{
"id": "ab",
"text": "AB"
},
{
"id": "qc",
"text": "QC"
},
{
"id": "bc",
"text": "BC"
}
]
};
var stateCityData =
{
"ca": [
{
"id": 0,
"text": "San Francisco"
},
{
"id": 1,
"text": "Los Angeles"
},
{
"id": 2,
"text": "San Diego"
}
],
"al": [
{
"id": 0,
"text": "test"
},
{
"id": 1,
"text": "test2"
},
{
"id": 2,
"text": "city3"
}
],
"bc": [
{
"id": 0,
"text": "2342344"
},
{
"id": 1,
"text": "23452345254"
},
{
"id": 2,
"text": "34345"
}
]
};
</script>
