Skip to content

Help! I still cannot get Nested Dropdown to work

The setup can be quite tricky. Keep in mind that the dependency logic is essentially embedded in the javascript.  It's crucial to follow the instructions EXACTLY.
  • the dropdowns must be set to "autocomplete" edit type
  • The 3rd parameter of set_col_edittype() must contain an ENTIRE string of all the "key:value" pair of that column

Let's dig deeper.

In the demo, $countryStateData is an array (array() replaced with shorthand [ ] for brevity) that contains two countries, 'usa' and 'canada' where each contains its states in sub-array respectively. This is the data to populate the first dropdown.

The second array $stateCityData contains the state details which are going to be displayed in the second dropdown, which is the nested dropdown.

$countryStateData =
    [
        'usa' => [
            ['id'=>'', 'text'=>''],
            ['id'=>'ca', 'text'=>'CA'],
            ['id'=>'al', 'text'=>'AL'],
            ['id'=>'nj', 'text'=>'NJ']
        ],
        'canada' => [
            ['id'=>'', 'text'=>''],
            ['id'=>'ab', 'text'=>'AB'],
            ['id'=>'qc', 'text'=>'QC'],
            ['id'=>'bc', 'text'=>'BC']
        ]
    ];

$stateCityData =
    [
        'ca' => [
            ['id'=>'', 'text'=>''],
            ['id'=>'ca', 'text'=>'San Francisco'],
            ['id'=>'al', 'text'=>'Los Angeles'],
            ['id'=>'nj', 'text'=>'San Diego']
        ],
        'al' => [
            ['id'=>'', 'text'=>''],
            ['id'=>'ab', 'text'=>'test'],
            ['id'=>'qc', 'text'=>'test2'],
            ['id'=>'bc', 'text'=>'city2']
        ],
        'bc' => [
            ['id'=>'', 'text'=>''],
            ['id'=>'ab', 'text'=>'2342344'],
            ['id'=>'qc', 'text'=>'bc city2'],
            ['id'=>'bc', 'text'=>'bc city333']
        ]
    ];


Call set_col_edittype() on both dropdown and set them to autocomplete as shown below. The 3rd parameter must contain the ENTIRE "key:value" pair of that column. In other words, not only Country dropdown must contain the key pair value of all the countries, the States dropdown must contain "key:value" pair for all the states including both USA and Canada, merged all in one "key:value" pair string.


$dg->set_col_edittype('country', 'autocomplete', ':;usa:USA;canada:Canada;France:France;Germany:Germany;Norway:Norway;Poland:Poland;Australia:Australia;Spain:Spain;Denmark:Denmark;Singapore:Singapore;Belgium:Belgium;Finland:Finland;New Zealand:New Zealand;Italy:Italy;Japan:Japan;Irelan:Ireland;Hong Kong:Hong Kong;Russia:Russia;Israel:Israel');

$dg->set_col_edittype('state', 'autocomplete', ':;bc:BC;ab:AB;qc:QC;al:AL;nj:NJ;ca:CA;Co. Cork:Co. Cork;CT:CT;Isle of Wight:Isle of Wight;MA:MA;NH:NH;NSW:NSW;NV:NV;NY:NY;Osaka:Osaka;PA:PA;Pretoria:Pretoria;Québec:Québec;Queensland:Queensland;Tokyo:Tokyo;Victoria:Victoria');


One final step, to call set_nested_dropdown()

$dg->set_nested_dropdown('country', 'state', 'countryStateData');


UPDATE:

Nested dropdown values can be PARTIALLY loaded from database.

For example, replacing the following:

$dg->set_col_edittype('country', 'autocomplete',
':;usa:USA;canada:Canada;France:France;Germany:Germany;Norway:Norway;Poland:Poland;Australia:Australia;Spain:Spain;Denmark:Denmark;Singapore:Singapore;Belgium:Belgium;Finland:Finland;New Zealand:New Zealand;Italy:Italy;Japan:Japan;Irelan:Ireland;Hong Kong:Hong Kong;Russia:Russia;Israel:Israel');

with:

$dg->set_col_edittype('country', 'autocomplete', 'SELECT CountryCode, CountryName FROM AllCountries')

And replacing the following:

$dg->set_col_edittype('country', 'autocomplete', 
':;bc:BC;ab:AB;qc:QC;al:AL;nj:NJ;ca:CA;Co. Cork:Co. Cork;CT:CT;Isle of Wight:Isle of Wight;MA:MA;NH:NH;NSW:NSW;NV:NV;NY:NY;Osaka:Osaka;PA:PA;Pretoria:Pretoria;Québec:Québec;Queensland:Queensland;Tokyo:Tokyo;Victoria:Victoria');

with

$dg->set_col_edittype('country', 'autocomplete', 'SELECT StateCode, StateName, CountryName FROM AllCountryStates')

Assuming both AllCountries and AllCountryStates database table exist.

Feedback and Knowledge Base