This time I will share jQuery Plugin and tutorial about Dynamic jQuery Cascading Dropdown Lists Plugin, hope it will help you in programming stack.
File Size: | 58.5 KB |
---|---|
Views Total: | 66397 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight and easy-to-use jQuery plugin for cascading dropdown lists. The basic usage of this plugin is to create a group of dropdown lists that the second dropdown is dependent on the first dropdown having a value, and the third dropdown is dependent on either the first or second one having a value.
Basic Usage:
1. Create the html for the cascading dropdown lists
01 |
< div id = "example1" class = "bs-docs-example" > |
02 |
< select class = "step1" > |
03 |
< option value = "" >Please select an option</ option > |
04 |
< option >Option1</ option > |
05 |
< option >Option2</ option > |
06 |
< option >Option3</ option > |
07 |
< option >Option4</ option > |
08 |
</ select > |
09 |
< select class = "step2" > |
10 |
< option value = "" >Please select an option</ option > |
11 |
< option >Option5</ option > |
12 |
< option >Option6</ option > |
13 |
< option >Option7</ option > |
14 |
< option >Option8</ option > |
15 |
</ select > |
16 |
< select class = "step3" > |
17 |
< option value = "" >Please select an option</ option > |
18 |
< option >Option9</ option > |
19 |
< option >Option10</ option > |
20 |
< option >Option11</ option > |
21 |
< option >Option12</ option > |
22 |
</ select > |
23 |
</ div > |
2. Include jQuery library and jQuery Cascading Dropdown plugin on the page
1 |
< script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" ></ script > |
2 |
< script type = "text/javascript" src = "jquery.cascadingdropdown.js" ></ script > |
3. Include MockJax.js to mock ajax requests
1 |
< script type = "text/javascript" src = "jquery.mockjax.js" ></ script > |
4. The javascript
01 |
$( '#example1' ).cascadingDropdown({ |
02 |
selectBoxes: [ |
03 |
{ |
04 |
selector: '.step1' |
05 |
}, |
06 |
{ |
07 |
selector: '.step2' , |
08 |
requires: [ '.step1' ] |
09 |
}, |
10 |
{ |
11 |
selector: '.step3' , |
12 |
requires: [ '.step1' , '.step2' ] |
13 |
} |
14 |
] |
15 |
}); |
5. All possible options.
01 |
$( '#example1' ).cascadingDropdown({ |
02 |
03 |
// use POST when sending Ajax request |
04 |
usePost: false , |
05 |
06 |
// stringify (JSON.stringify) dropdown data for Ajax requests |
07 |
useJson: false , |
08 |
09 |
// overrides the default value for the class name applied to the dropdown element during Ajax calls |
10 |
isLoadingClassName: 'cascading-dropdown-loading' , |
11 |
12 |
// array of dropdown objects |
13 |
selectBoxes: [{ |
14 |
selector: '.select1' , |
15 |
... |
16 |
}], |
17 |
18 |
// selector for select box inside parent container. |
19 |
selector: '.selectbox1' , |
20 |
|
21 |
// source for dropdown items. |
22 |
// This can be a URL pointing to the web service that provides the dropdown items, or a function that manually handles the Ajax request and response. |
23 |
source: '/api/CompanyInfo/GetCountries' , |
24 |
25 |
// array of dropdown selectors required to have value before this dropdown is enabled. |
26 |
requires: [ '.selectbox1' ], |
27 |
28 |
// Required dropdown value parameter name used in Ajax requests. |
29 |
// If this value is not set, the plugin will use the dropdown name attribute. |
30 |
// If neither this parameter nor the name attribute is set, this dropdown will not be taken into account in any Ajax request. |
31 |
paramName: 'countryId' , |
32 |
33 |
// sets the default dropdown item on initialisation. |
34 |
// The value can be a the value of the targeted dropdown item, or its index value. |
35 |
selected: 'red' , |
36 |
37 |
// triggered when the plugin is completely initialised |
38 |
// The event handler will be provided with the event object, and an object containing the current values of all the dropdowns in the group. |
39 |
onReady: function (event, allValues) { }, |
40 |
41 |
// triggered whenever the value of a dropdown in a particular group is changed. |
42 |
// The event handler will be provided with the event object, and an object containing the current values of all the dropdowns in the group. |
43 |
onChange: function (event, allValues) { } |
44 |
45 |
}); |
6. API methods.
1 |
$( '#example1' ).cascadingDropdown( 'destroy' ); |
Changelog:
v1.2.9 (2019-11-01)
- Minor fixes
2019-05-30
- dist update
2016-03-07
- Added .destroy() method.
2016-01-25
- Added multiple pre-select
2016-01-24
- bugs fixed.
2014-06-15
- bugs fixed.
2014-03-04
- bug fixed.
2014-01-06
- bug fixed.
This awesome jQuery plugin is developed by dnasir. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net