Multiple dependent drop down list JavaScript

Dependent Dropdown 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.

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 ... // Child # 1 $["#subcat-id"].depdrop[{ url: '/server/getSubcat.php', depends: ['cat-id'] }]; // Child # 2 $["#prod-id"].depdrop[{ url: '/server/getProd.php', depends: ['cat-id', 'subcat-id'] }];

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 ... // Child # 1 $["#subcat-id"].depdrop[{ url: '/server/getSubcat', depends: ['cat-id'], /* dependent parent */ params: ['hidden-1', 'hidden-2'] /* additional input as parameters to ajax */ }];

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 // Child # 1 $['#account-lev1'].depdrop[{ depends: ['account-lev0'], url: '///localhost/site/child-account', loadingText: 'Loading child level 1 ...' }]; // Child # 2 $['#account-lev2'].depdrop[{ depends: ['account-lev1'], url: '///localhost/site/child-account', loadingText: 'Loading child level 2 ...' }]; // Child # 3 - LAST CHILD $['#account-lev3'].depdrop[{ depends: ['account-lev2'], initialize: true, initDepends: ['account-lev0'], url: '///localhost/site/child-account', loadingText: 'Loading child level 3 ...' }]; ?>

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 ... // Child # 1 $["#subcat2-id"].depdrop[{ url: '/server/getSubcat', depends: ['cat2-id'], /* dependent parent */ }];

visitors to Krajee Jquery Plugins since 22-May-2017