• Stars
    star
    182
  • Rank 211,154 (Top 5 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 10 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

JQuery plugin that enables to add and control multi level dependent dropdown lists.

Krajee Logo
dependent-dropdown
Donate

Financial Contributors on Open Collective BOWER version Latest Stable Version License Packagist Downloads Monthly Downloads

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 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 and plugin demos at Krajee JQuery plugins.

Pre-requisites

  1. Latest JQuery

  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: <dependent-list>, selected: <default-selected-value>}
    

where,

  • output is an array of data for the dependent list of the format
{id: <option-value>, name: <option-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: <option-value>, name: <option-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 or TAR ball and extract the plugin assets (css and js folders) into your project.

Usage

Step 1: Load the following assets in your header.

<link href="path/to/css/dependent-dropdown.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="path/to/js/dependent-dropdown.min.js" type="text/javascript"></script>
<!-- optionally if you need translation for your language then include locale file as mentioned below -->
<script src="path/to/js/locales/<lang>.js"></script>

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/<lang>.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.

<select id="parent-1">
   <!-- your select options -->
</select>

<select id="child-1" class="depdrop" data-depends="['parent-1']" data-url="/path/to/child_1_list">
   <!-- your select options -->
</select>

<select id="child-2" class="depdrop" data-depends="['parent-1', 'child-1']" data-url="/path/to/child_2_list">
   <!-- your select options -->
</select>

Due to array data being used for the data-depends attribute, you may need to escape the data like so:

<select id="child-1" class="depdrop" data-depends="[&quot;parent-1&quot;]" data-url="/path/to/child_1_list">
   <!-- your select options -->
</select>

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

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

dependent-dropdown is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.

More Repositories

1

bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
JavaScript
5,356
star
2

bootstrap-star-rating

A simple yet powerful JQuery star rating plugin with fractional rating support.
JavaScript
1,055
star
3

yii2-widgets

Collection of useful widgets for Yii Framework 2.0
PHP
558
star
4

yii2-grid

Enhanced GridView with various utilities for Yii Framework 2.0
PHP
556
star
5

yii2-widget-select2

Enhanced Yii2 wrapper for the Select2 jQuery plugin (sub repo split from yii2-widgets).
CSS
323
star
6

yii2-widget-fileinput

An enhanced FileInput widget for Bootstrap 4.x/3.x with file preview, multiple selection, and more features (sub repo split from yii2-widgets)
PHP
229
star
7

yii2-export

A library to export server/db data in various formats (e.g. excel, html, pdf, csv etc.)
PHP
165
star
8

yii2-mpdf

A Yii2 wrapper component for the mPDF library which generates PDF files from UTF-8 encoded HTML.
CSS
162
star
9

yii2-tree-manager

An advanced tree management module using nested sets for Yii 2.
PHP
150
star
10

bootstrap-popover-x

Bootstrap popover extended with modal properties and more.
116
star
11

yii2-editable

An enhanced editable widget for Yii 2.0 that allows easy editing of displayed data with html inputs, widgets and more.
PHP
112
star
12

yii2-widget-datepicker

Enhanced Yii2 wrapper for the bootstrap datepicker plugin (sub repo split from yii2-widgets)
PHP
112
star
13

yii2-widget-datetimepicker

Enhanced Yii2 wrapper for the bootstrap datetimepicker plugin (sub repo split from yii2-widgets)
PHP
105
star
14

bootstrap-tabs-x

Bootstrap tabs supercharged with various alignment and styling options
101
star
15

yii2-builder

Build forms (single or tabular) easily for Yii Framework 2.0.
PHP
100
star
16

bootstrap-checkbox-x

An extended checkbox plugin for bootstrap with three states and additional styles.
JavaScript
93
star
17

yii2-date-range

A Date Range Picker for Bootstrap useful for reports and filtering.
JavaScript
92
star
18

yii2-social

A Yii2 module for embedding social plugins and widgets.
PHP
92
star
19

yii2-helpers

Collection of useful helper functions for Yii Framework 2.0
PHP
89
star
20

yii2-markdown

Advanced Markdown editing and conversion utilities for Yii Framework 2.0
PHP
89
star
21

strength-meter

A dynamic strength meter for password input validation with various configurable options.
JavaScript
88
star
22

yii2-widget-depdrop

Widget that enables setting up dependent dropdowns with nested dependencies (sub repo split from yii2-widgets).
PHP
82
star
23

yii2-password

Useful password strength validation utilities for Yii Framework 2.0
PHP
75
star
24

yii2-dynagrid

Turbo charge the Yii 2 GridView with personalized columns, page size, and themes.
PHP
74
star
25

yii2-icons

Set of icon frameworks for easy use in Yii Framework 2.0
CSS
70
star
26

yii2-detail-view

Various enhancements to the Yii 2 Detail View with ability to edit data and manage styles using BS3.
PHP
70
star
27

yii2-krajee-base

Foundation classes and components used by Krajee Yii2 extensions
PHP
68
star
28

yii2-app-practical

Yii 2 Practical Project Template (based on advanced app)
PHP
67
star
29

yii2-widget-activeform

Enhanced Yii2 active-form and active-field with full bootstrap styling support (sub repo split from yii2-widgets).
PHP
63
star
30

yii2-datecontrol

Date control module allowing separation of date formats for View & Model for Yii Framework 2.0.
PHP
55
star
31

yii2-dialog

An extension that wraps bootstrap3-dialog for Yii 2.0 framework
PHP
49
star
32

yii2-widget-typeahead

Enhanced Yii2 wrapper for the Twitter Typeahead plugin (sub repo split from yii2-widgets).
JavaScript
45
star
33

yii2-widget-rating

A Yii2 widget for the simple yet powerful bootstrap-star-rating plugin with fractional rating support (sub repo split from yii2-widgets)
PHP
45
star
34

php-date-formatter

A Javascript datetime formatting and manipulation library using PHP date-time formats.
JavaScript
44
star
35

yii2-sortable

Create sortable lists and grids using HTML5 drag and drop API for Yii 2.0.
JavaScript
43
star
36

yii2-widget-timepicker

Enhanced Yii2 wrapper for the bootstrap timepicker plugin (sub repo split from yii2-widgets).
PHP
41
star
37

krajee-markdown-editor

A Boostrap styled markdown editor that offers configurable toolbar, live preview, export, fullscreen mode, and more features
JavaScript
41
star
38

mpdf

Fork of the mPDF latest DEV library (unofficial) with composer and packagist support.
PHP
40
star
39

yii2-widget-switchinput

A Yii2 wrapper widget for the Bootstrap Switch plugin to use checkboxes & radios as toggle switches (sub repo split from yii2-widgets)
PHP
38
star
40

yii2-widget-growl

A widget to generate growl based notifications using bootstrap-growl plugin (sub repo split from yii2-widgets)
PHP
38
star
41

yii2-widget-sidenav

An enhanced side navigation menu styled for bootstrap (sub repo split from yii2-widgets)
PHP
36
star
42

bootstrap-fileinput-samples

Example files for the bootstrap-fileinput plugin
35
star
43

yii2-app-practical-a

Yii 2 Practical-A ProjectTemplate (based on advanced app)
PHP
34
star
44

yii2-widget-colorinput

An enhanced Yii2 widget encapsulating the HTML 5 color input (sub repo split from yii2-widgets)
JavaScript
32
star
45

yii2-app-practical-b

Yii 2 Practical Application Template (based on basic app)
PHP
31
star
46

yii2-tabs-x

Extended bootstrap tabbed navigation widget for Yii 2.0 with various alignment and styling options.
PHP
30
star
47

yii2-widget-alert

An extended bootstrap alert and alert block widget for Yii2 (sub repo split from yii2-widgets)
PHP
28
star
48

yii2-nav-x

Extended bootstrap Nav widget with submenu option for Yii 2.
PHP
28
star
49

yii2-widget-spinner

A widget to render animated CSS3 loading spinners with VML fallback for IE (sub repo split from yii2-widgets)
JavaScript
28
star
50

yii2-slider

A slider input with orientations, range selections and more features based on bootstrap-slider.
PHP
28
star
51

yii2-ipinfo

An IP address information display widget for Yii 2 with country flag and geo position info
PHP
27
star
52

yii2-money

An advanced money mask input for Yii 2.0 styled for Bootstrap 3
JavaScript
26
star
53

yii2-checkbox-x

Extended checkbox widget for bootstrap with three states and additional styles for Yii 2.
PHP
25
star
54

yii2-field-range

Easily manage Yii 2 ActiveField ranges (from/to) with Bootstrap 3.x / 4.x addons markup and more.
PHP
24
star
55

yii2-popover-x

Extended bootstrap popover for Yii 2.0 with modal behavior and various styling options.
PHP
23
star
56

yii2-sortable-input

An input widget based on yii2-sortable extension allowing to store/save the sort order.
PHP
23
star
57

yii2-number

A number format mask control and input for Yii2 Framework
PHP
22
star
58

yii2-editors

Yii2 editor widgets Summernote and Codemirror.
PHP
22
star
59

yii2-validators

Enhanced Yii2 model validator components / utilities for Yii2 Framework
PHP
20
star
60

yii2-widget-rangeinput

An enhanced Yii 2 widget encapsulating the HTML 5 range input (sub repo split from yii2-widgets)
PHP
19
star
61

yii2-widget-touchspin

Yii2 wrapper for the bootstrap-touchspin spinner component (sub repo split from yii2-widgets)
JavaScript
18
star
62

yii2-widget-affix

A scrollspy and affixed enhanced navigation to highlight page sections (sub repo split from yii2-widgets)
PHP
15
star
63

yii2-dropdown-x

An extended bootstrap dropdown widget for Yii 2 with submenu drilldown.
PHP
15
star
64

yii2-label-inplace

A form enhancement widget for in-field label support.
JavaScript
11
star
65

yii2-bootstrap4-dropdown

Enhanced Bootstrap 4 dropdown widget for Yii2 framework with nested submenu support.
PHP
9
star
66

yii2-word-report

Make reports in Yii2 with Microsoft Word Templates
PHP
9
star
67

yii2-report

Create reports out of MS Word templates using PHP-Reports api.
PHP
8
star
68

yii2-context-menu

Yii 2 context menu extension with Bootstrap 3 styling.
PHP
7
star
69

yii2-filesystem

File system handling utilities and components
PHP
6
star
70

yii2-mail-manager

Mailer management module with queuing and administration
PHP
6
star
71

yii2-rest-api

Yii2 Rest API Template
PHP
5
star
72

yii2-mailer

A mail management module for Yii 2.0 with ability to manage mail queues, templates, and more.
4
star
73

yii2-mxgraph

Yii2 port of the MxGraph library
3
star
74

yii2-google-docs

2
star
75

yii2-query-filter

Advanced Yii2 query filters via an easy user interface
1
star
76

kartik-v

1
star
77

yii2-bootstrap5-dropdown

Enhanced Bootstrap 5 dropdown widget for Yii2 framework with nested submenu support
PHP
1
star