Dynamic jQuery Cascading Dropdown Lists Plugin - Free Download Dynamic jQuery Cascading Dropdown Lists Plugin

Free Download Dynamic jQuery Cascading Dropdown Lists Plugin

Posted on

This time I will share jQuery Plugin and tutorial about Dynamic jQuery Cascading Dropdown Lists Plugin, hope it will help you in programming stack.

Dynamic jQuery Cascading Dropdown Lists Plugin - Free Download Dynamic jQuery Cascading Dropdown Lists Plugin
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

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