PHPackages diginova/kartik-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. diginova/kartik-dependent-dropdown ActiveLibrary[Utility & Helpers](/categories/utility) diginova/kartik-dependent-dropdown ================================== A multi level dependent dropdown JQuery plugin that allows nested dependencies. 0539↓50%JavaScript Since Apr 4Pushed 3y agoCompare [ Source](https://github.com/diginova/kartik-dependent-dropdown)[ Packagist](https://packagist.org/packages/diginova/kartik-dependent-dropdown)[ RSS](/packages/diginova-kartik-dependent-dropdown/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (2)Used By (0) [ ![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 19 — LowBetter than 10% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity16 Limited adoption so far Community14 Small or concentrated contributor base Maturity24 Early-stage or recently created project Bus Factor1 Top contributor holds 80.9% 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/479de2550ad555c5fe1ece5ced49a05a57f2606c94c3bef7014ac8b4c0e58d91?d=identicon)[diginova](/maintainers/diginova) --- Top Contributors [![kartik-v](https://avatars.githubusercontent.com/u/3592619?v=4)](https://github.com/kartik-v "kartik-v (89 commits)")[![demirmehmet0](https://avatars.githubusercontent.com/u/56119655?v=4)](https://github.com/demirmehmet0 "demirmehmet0 (5 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)") ### Embed Badge ![Health badge](/badges/diginova-kartik-dependent-dropdown/health.svg) ``` [![Health](https://phpackages.com/badges/diginova-kartik-dependent-dropdown/health.svg)](https://phpackages.com/packages/diginova-kartik-dependent-dropdown) ``` ### Alternatives [kegi/netscape-cookie-file-handler Netscape Cookie File Handler 239.3k](/packages/kegi-netscape-cookie-file-handler)[blaspsoft/forerunner A Laravel package that provides an elegant, migration-inspired API for defining JSON schemas that ensure your LLM responses are perfectly structured every time. 501.5k](/packages/blaspsoft-forerunner)[silverstripe/multi-domain Allows multiple domains to access one CMS instance, mapping them to different sections of the hierarchy 141.6k](/packages/silverstripe-multi-domain) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)