PHPackages kartik-v/dependent-dropdown - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. kartik-v/dependent-dropdown ActiveLibrary[Utility & Helpers](/categories/utility) kartik-v/dependent-dropdown =========================== A multi level dependent dropdown JQuery plugin that allows nested dependencies. v1.4.9(7y ago)1805.0M—6.7%643BSD-3-ClauseJavaScript Since May 12Pushed 3y ago14 watchersCompare [ Source](https://github.com/kartik-v/dependent-dropdown)[ Packagist](https://packagist.org/packages/kartik-v/dependent-dropdown)[ Docs](https://github.com/kartik-v/dependent-dropdown)[ RSS](/packages/kartik-v-dependent-dropdown/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)DependenciesVersions (14)Used By (3) [ ![Krajee Logo](https://camo.githubusercontent.com/4addfbb3869c3fc7d79befea4f06d9cf3655a686fb503df0da1d725859cfdef9/687474703a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f6b72616a65652d6c6f676f2d622e706e67) ](http://plugins.krajee.com "Krajee Plugins") dependent-dropdown --- [ ![Donate](https://camo.githubusercontent.com/4af77d425ca202e55ab3d711b438e238ded194735bc345a019ac060e03e26227/687474703a2f2f6b617274696b2d762e6769746875622e696f2f626f6f7473747261702d66696c65696e7075742d73616d706c65732f73616d706c65732f646f6e6174652e706e67) ](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DTP3NZQ6G2AYU "Donate via Paypal") ========================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================== [](#------------------------dependent-dropdown--------------------) [![Financial Contributors on Open Collective](https://camo.githubusercontent.com/97bb2f281cae83c5bd46196632fdec9305ff12deb7fca94802985e1f5c7ac91b/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f616c6c2f62616467652e7376673f6c6162656c3d66696e616e6369616c2b636f6e7472696275746f7273)](https://opencollective.com/dependent-dropdown) [![BOWER version](https://camo.githubusercontent.com/fd25557beaf30d6f33203f2b6e153f81c8a2c5cb4a438a6c2eb38cbb26bdbf45/68747470733a2f2f62616467652d6d652e6865726f6b756170702e636f6d2f6170692f626f7765722f6b617274696b2d762f646570656e64656e742d64726f70646f776e2e706e67)](http://badges.enytc.com/for/bower/kartik-v/dependent-dropdown)[![Latest Stable Version](https://camo.githubusercontent.com/fffa7a50524ba7dc067a0ba276882d16e0c4378fb4c1b277a29d542bcfd6c67f/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f646570656e64656e742d64726f70646f776e2f762f737461626c65)](https://packagist.org/packages/kartik-v/dependent-dropdown)[![License](https://camo.githubusercontent.com/52f6b3c7b8a120cfebbe8607b885244ba256bea2d4391f84010b2e6ba4575d93/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f646570656e64656e742d64726f70646f776e2f6c6963656e7365)](https://packagist.org/packages/kartik-v/dependent-dropdown)[![Packagist Downloads](https://camo.githubusercontent.com/ee74e1768cbc7bfd8ed40d600d1ca351cff53e195b5847d1989c474637d7bbc9/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f646570656e64656e742d64726f70646f776e2f646f776e6c6f616473)](https://packagist.org/packages/kartik-v/dependent-dropdown)[![Monthly Downloads](https://camo.githubusercontent.com/dfb4953d33688969b1003978fe272f426923d60d5141ab82e36695c5498e4a55/68747470733a2f2f706f7365722e707567782e6f72672f6b617274696b2d762f646570656e64656e742d64726f70646f776e2f642f6d6f6e74686c79)](https://packagist.org/packages/kartik-v/dependent-dropdown) 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. > NOTE: Refer the [CHANGE LOG](https://github.com/kartik-v/dependent-dropdown/blob/master/CHANGE.md) for details on updates to various releases. Features -------- [](#features) - Apply the plugin on a select element and set dependency to one or more other input / select elements (including dependency nesting). - Automatically convert `select` inputs with class `depdrop` to dependent dropdowns. The plugin supports HTML5 data attributes to configure the dependent dropdown options. - Automatically initialize dependent dropdowns based on preselected values (useful for update scenario). - Supports both `select` input with basic `options` and select with `optgroups`. - Automatically lock/disable the dependent dropdown until dependent results are available. - The plugin uses ajax call to the server to render the list of dependent options. - Allows a loading indicator to be displayed in dependent select until the results are fetched from the server. - Configure your own loading progress text to be displayed for each dependent dropdown before the results are fetched from the server. - Display a placeholder label with an empty value. For `optgroups` automatically disable this option. - Triggers JQuery events for advanced development. Events currently available are `depdrop:init`, `depdrop:change`, `depdrop:beforeChange`,`depdrop:afterChange`, and `depdrop:error`. - Ability to configure HTML attributes of each `option` element via ajax response (for example dynamically disabling some dropdown options or adding styles). Documentation and Demo ---------------------- [](#documentation-and-demo) View the [plugin documentation](http://plugins.krajee.com/dependent-dropdown) and [plugin demos](http://plugins.krajee.com/dependent-dropdown/demo) at Krajee JQuery plugins. Pre-requisites -------------- [](#pre-requisites) 1. Latest [JQuery](http://jquery.com/) 2. All select inputs in markup must have a defined `ID` attribute for the plugin to work. 3. Tested to work currently with default HTML select input. It is not tested to work with other JQuery plugins that enhance the HTML select input (e.g. Select2, multiselect etc.). However, the plugin exposes events, which can be used in such situations. 4. The dependent dropdown is generated using an ajax call and hence requires a web server and web programming language to generate this. The plugin passes the dependent id values as an input to the ajax call via POST action. The ajax response should be a JSON encoded specified format like below: ``` {output: , selected: } ``` where, - `output` is an array of data for the dependent list of the format ``` {id: , name: } ``` - `selected` is the default selected value after the dependent dropdown is generated. If you desire a dependent list containing `optgroups` then the `output` must be of the format ``` {group-name: {id: , name: }} ``` Installation ------------ [](#installation) ### Using Bower [](#using-bower) You can use the `bower` package manager to install. Run: ``` bower install dependent-dropdown ``` ### Using NPM [](#using-npm) To install using the `npm` package manager run: ``` npm install dependent-dropdown ``` ### Using Composer [](#using-composer) You can use the `composer` package manager to install. Either run: ``` $ php composer.phar require kartik-v/dependent-dropdown "@dev" ``` or add: ``` "kartik-v/dependent-dropdown": "@dev" ``` to your composer.json file ### Manual Install [](#manual-install) You can also manually install the plugin easily to your project. Just download the source [ZIP](https://github.com/kartik-v/dependent-dropdown/zipball/master) or [TAR ball](https://github.com/kartik-v/dependent-dropdown/tarball/master) and extract the plugin assets (css and js folders) into your project. Usage ----- [](#usage) **Step 1:** Load the following assets in your header. ``` ``` If you noticed, you need to load the `jquery.min.js` in addition to the `dependent-dropdown.min.css` and `dependent-dropdown.min.js` for the plugin to work with default settings. The locale file `js/locales/.js` can be optionally included for translating for your language if needed. **Step 2:** Setup your select input markup to. Automatically set dependent dropdowns by adding the class `depdrop` and setting data attributes. NOTE: All select inputs must have a defined `ID` attribute for the plugin to work. ``` ``` Due to array data being used for the data-depends attribute, you may need to escape the data like so: ``` ``` **Step 2 (Alternative):** You can initialize the plugin via javascript for your dependent dropdowns. For example, ``` $("#child-1").depdrop({ depends: ['parent-1'], url: '/path/to/child_1_list' }); $("#child-2").depdrop({ depends: ['parent-1', 'child-1'], url: '/path/to/child_2_list' }); ``` Contributors ------------ [](#contributors) ### Code Contributors [](#code-contributors) This project exists thanks to all the people who contribute. \[[Contribute](CONTRIBUTING.md)\]. [![](https://camo.githubusercontent.com/6872557e213d5fc6a3f6c9abb7b593de70d38d1881ba0e7cf09f9226db1fb55d/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f636f6e7472696275746f72732e7376673f77696474683d38393026627574746f6e3d66616c7365)](https://github.com/kartik-v/dependent-dropdown/graphs/contributors) ### Financial Contributors [](#financial-contributors) Become a financial contributor and help us sustain our community. \[[Contribute](https://opencollective.com/dependent-dropdown/contribute)\] #### Individuals [](#individuals) [![](https://camo.githubusercontent.com/934468dada47290a96a90d702642bf30a06585f3369047c68cb44880b750e6be/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f696e646976696475616c732e7376673f77696474683d383930)](https://opencollective.com/dependent-dropdown) #### Organizations [](#organizations) Support this project with your organization. Your logo will show up here with a link to your website. \[[Contribute](https://opencollective.com/dependent-dropdown/contribute)\] [![](https://camo.githubusercontent.com/27c8493f8ea88d65d9661070fa963e6ae46ec81511bf497261f26b1eb950a086/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f302f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/0/website)[![](https://camo.githubusercontent.com/6137d4239a0a25cff23d8f3c4fb5d068e5da938dd45b45a5b4b6f620398eb4d1/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f312f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/1/website)[![](https://camo.githubusercontent.com/c90d7bf16217829e7ab3cec62d195e5b42aec025bd6c62738c099115b30984c0/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f322f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/2/website)[![](https://camo.githubusercontent.com/00bd6832a053f9f4232586fa7e583086b9181ab4abc5d40490be2bff0e5de945/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f332f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/3/website)[![](https://camo.githubusercontent.com/15a2487f290ba34ee16b85a3710a0ea3faf793fb55a7bb37b87cb15ed307fb94/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f342f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/4/website)[![](https://camo.githubusercontent.com/9ec8051eef8e46f1b829cb4cdd8a9d9d6afbd491a0d95a1b70a4451ab9495879/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f352f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/5/website)[![](https://camo.githubusercontent.com/9a90f607a04cbde9e0191a0ab284ae4b0753221e55c16beb5f66be6c5ad97c62/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f362f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/6/website)[![](https://camo.githubusercontent.com/f1b6b36b1fdcd2edf84155c48954d1ab84d9b53cf0246df6eda172aaefc66e86/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f372f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/7/website)[![](https://camo.githubusercontent.com/425ffe50a42dd61b98b8fb7c2ffb74749ed18882a998efc1fde13be48161b6b9/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f382f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/8/website)[![](https://camo.githubusercontent.com/4571829e77f905d79287477117bf205b675908c24390388c9af2762e0e8307bf/68747470733a2f2f6f70656e636f6c6c6563746976652e636f6d2f646570656e64656e742d64726f70646f776e2f6f7267616e697a6174696f6e2f392f6176617461722e737667)](https://opencollective.com/dependent-dropdown/organization/9/website) License ------- [](#license) **dependent-dropdown** is released under the BSD-3-Clause License. See the bundled `LICENSE.md` for details. ### Health Score 49 — FairBetter than 95% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity62 Solid adoption and visibility Community30 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 84.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~146 days Total 13 Last Release 2627d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3592619?v=4)[Kartik Visweswaran](/maintainers/kartik-v)[@kartik-v](https://github.com/kartik-v) --- Top Contributors [![kartik-v](https://avatars.githubusercontent.com/u/3592619?v=4)](https://github.com/kartik-v "kartik-v (89 commits)")[![drsdre](https://avatars.githubusercontent.com/u/809827?v=4)](https://github.com/drsdre "drsdre (4 commits)")[![tibee](https://avatars.githubusercontent.com/u/3636947?v=4)](https://github.com/tibee "tibee (3 commits)")[![Chouhada](https://avatars.githubusercontent.com/u/8090903?v=4)](https://github.com/Chouhada "Chouhada (2 commits)")[![monkeywithacupcake](https://avatars.githubusercontent.com/u/7316730?v=4)](https://github.com/monkeywithacupcake "monkeywithacupcake (2 commits)")[![ricardonavarrom](https://avatars.githubusercontent.com/u/2845589?v=4)](https://github.com/ricardonavarrom "ricardonavarrom (2 commits)")[![arthurmarchesi](https://avatars.githubusercontent.com/u/16351102?v=4)](https://github.com/arthurmarchesi "arthurmarchesi (1 commits)")[![m-zanetti](https://avatars.githubusercontent.com/u/8858793?v=4)](https://github.com/m-zanetti "m-zanetti (1 commits)")[![albertborsos](https://avatars.githubusercontent.com/u/7307145?v=4)](https://github.com/albertborsos "albertborsos (1 commits)") --- Tags jqueryoptiondropdownselectdependent ### Embed Badge ![Health badge](/badges/kartik-v-dependent-dropdown/health.svg) ``` [![Health](https://phpackages.com/badges/kartik-v-dependent-dropdown/health.svg)](https://phpackages.com/packages/kartik-v-dependent-dropdown) ``` ### Alternatives [snapappointments/bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support. 9.8k480.4k3](/packages/snapappointments-bootstrap-select)[kartik-v/yii2-widget-depdrop Widget that enables setting up dependent dropdowns with nested dependencies (sub repo split from yii2-widgets) 814.9M18](/packages/kartik-v-yii2-widget-depdrop)[kartik-v/yii2-widget-typeahead Enhanced Yii2 wrapper for the Twitter Typeahead plugin (sub repo split from yii2-widgets). 454.8M9](/packages/kartik-v-yii2-widget-typeahead)[harvesthq/chosen Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors. 385.2M12](/packages/harvesthq-chosen)[jjj/chosen Chosen is a JavaScript plugin that makes select boxes user-friendly. It is currently available in both jQuery and Prototype flavors. 27522.1k2](/packages/jjj-chosen)[dnadesign/silverstripe-advanceddropdowns DropdownField and GroupedDropdownField that allows the use of data-attributes on each option tag 1717.3k](/packages/dnadesign-silverstripe-advanceddropdowns) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)