Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kartik-v/dependent-dropdown
JQuery plugin that enables to add and control multi level dependent dropdown lists.
https://github.com/kartik-v/dependent-dropdown
Last synced: about 2 months ago
JSON representation
JQuery plugin that enables to add and control multi level dependent dropdown lists.
- Host: GitHub
- URL: https://github.com/kartik-v/dependent-dropdown
- Owner: kartik-v
- License: other
- Created: 2014-04-30T16:05:18.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-04-04T13:27:51.000Z (over 1 year ago)
- Last Synced: 2024-04-13T21:19:06.823Z (5 months ago)
- Language: JavaScript
- Homepage: http://plugins.krajee.com/dependent-dropdown
- Size: 144 KB
- Stars: 182
- Watchers: 17
- Forks: 68
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGE.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
dependent-dropdown
[](https://opencollective.com/dependent-dropdown) [](http://badges.enytc.com/for/bower/kartik-v/dependent-dropdown)
[](https://packagist.org/packages/kartik-v/dependent-dropdown)
[](https://packagist.org/packages/kartik-v/dependent-dropdown)
[](https://packagist.org/packages/kartik-v/dependent-dropdown)
[](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
- 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
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
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
### Using Bower
You can use the `bower` package manager to install. Run:
bower install dependent-dropdown
### Using NPM
To install using the `npm` package manager run:
npm install dependent-dropdown
### 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
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
**Step 1:** Load the following assets in your header.
```html
```
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.
```html
```
Due to array data being used for the data-depends attribute, you may need to escape the data like so:
```html
```
**Step 2 (Alternative):** You can initialize the plugin via javascript for your dependent dropdowns. For example,
```js
$("#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
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/dependent-dropdown/contribute)]
#### Individuals
#### 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)]
## License
**dependent-dropdown** is released under the BSD-3-Clause License. See the bundled `LICENSE.md` for details.