Drop down box dependent on the option selected in another drop down box html

• Source
• Docs
• Demo

1. Home
2. Dependent Dropdown
3. Demo

Please disable your adblocker to allow content being blocked from this site. Alternatively, check your antivirus program or proxy settings to whitelist this site. Once done, hard refresh this page (CTRL+F5).

A multi level dependent dropdown JQuery plugin that allows nested dependencies. The plugin allows you to convert normal select inputs, whose options are derived based on value selected in another input/or a group of inputs. It works both with normal select options and select with optgroups as well.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

Basic Usage

A 3-level nested dependency example. The dependent dropdowns generate will generate a linear list of options.

NOTE: You must generate a JSON encoded output from server with an array format like below:

$json_output = {
    output: [
        {id: 'id-1', name: 'name-1'],
        {id: 'id-2', name: 'name-2'],
        {id: 'id-3', name: 'name-3']
    ],
    selected: 'default_id'
};

    Select ...
    




    Select ...
    




    Select ...
    






'', 'name'=>''],
            //    ['id'=>'', 'name'=>'']
            // ]
            echo json_encode(['output'=>$out, 'selected'=>'']);
            return;
        }
    }
    echo json_encode(['output'=>'', 'selected'=>'']);
?>


[
             *          ['id'=>'', 'name'=>''],
             *          ['id'=>'', 'name'=>'']
             *       ],
             *       'selected'=>''
             *  ]
             */
           
           echo json_encode(['output'=>$data['out'], 'selected'=>$data['selected']]);
           return;
        }
    }
    echo json_encode(['output'=>'', 'selected'=>'']);
?>

Advanced Usage 1

A 2-level dependency with optgroups generated in dependent dropdown list. The dependent dropdowns will generate a list of options grouped by optgroup. In addition, this also includes additional params where additional form input identifiers are passed.

NOTE: You must generate a JSON encoded output from server with an array format like below:

$json_output = {
    output: {
        group-1: {
            {id: 'id-1', name: 'name-1'],
            {id: 'id-2', name: 'name-2'],
            {id: 'id-3', name: 'name-3']
        },
        group-2: {
            {id: 'id-4', name: 'name-4'],
            {id: 'id-5', name: 'name-5'],
            {id: 'id-6', name: 'name-6']
        },
    },
    selected: 'default_id'
};

    Select ...
    




    Select ...
    










[
            //        ['id'=>'', 'name'=>''],
            //        ['id'=>'', 'name'=>'']
            //    ],
            //    'group2'=>[
            //        ['id'=>'', 'name'=>''], 
            //        ['id'=>'', 'name'=>'']
            //    ]            
            // ]
            
            
            $selected = self::getDefaultSubCat($cat_id);
            // the getDefaultSubCat function will query the database
            // and return the default sub cat for the cat_id
            
            echo json_encode(['output'=>$out, 'selected'=>$selected]);
            return;
        }
    }
    echo json_encode(['output'=>'', 'selected'=>'']);
}
?>

Advanced Usage 2

Advanced four level dependency. Check how the initDepends and initialize properties are used for the last child to trigger the ajax requests correctly on initialization. Click here to view the same demo modified for usage with Select2 plugin and preselected values populated from your server (using Yii 2 PHP framework).

    Assets
    Liabilities
    Expenses
    Income




    Bank
    




    Savings
    




    Savings A/C 2
    




?>

Advanced Usage 3

Ability to selectively format each dropdown option HTML attributes via the AJAX response sent. This is done by sending an additional data options as an object (associative array) of HTML attribute keys and values that will be applied to each dropdown option. For example, on selecting 'Electronics' as category the following data will be returned via ajax. Note how you can selectively disable 'Cameras' and 'Televisions' and how you can style each option.

{id: 1, name: 'Mobile Phones', options: {style: 'color:green'}}, 
{id: 2, name: 'Tablets', options: {style: 'color:blue'}}, 
{id: 3, name: 'Computers & Accessories', options: {style: 'color:red'}}, 
{id: 4, name: 'Cameras', options: {disabled: true, style: 'color:silver'}},
{id: 5, name: 'Televisons', options: {disabled: true, style: 'color:silver'}}

    Select ...
    




    Select ...
    






1, 'name'=>'Mobile Phones', 'options'=>['style'=>'color:green']], 
                ['id'=>2, 'name'=>'Tablets', 'options'=>['style'=>'color:blue']], 
                ['id'=>3, 'name'=>'Computers & Accessories', 'options'=>['style'=>'color:red']], 
                ['id'=>4, 'name'=>'Cameras', 'options'=>['disabled'=>true, 'style'=>'color:silver']],
                ['id'=>5, 'name'=>'Televisons', 'options'=>['disabled'=>true, 'style'=>'color:silver']]
             ]
            **/
            
            $selected = self::getDefaultSubCat($cat_id);
            // the getDefaultSubCat function will query the database
            // and return the default sub cat for the cat_id
            echo json_encode(['output'=>$out, 'selected'=>$selected]);
            return;
        }
    }
    echo json_encode(['output'=>'', 'selected'=>'']);
}
?>

How do I populate a DropDownList based on another dropdown selected value?

How do I create a nested dropdown menu in HTML?