Tag Archives: Cascading

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"/>

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

<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>