Download Easy Ajax-enabled Dependent Dropdown Plugin With jQuery – ssdCascadingDropDown

This time I will share jQuery Plugin and tutorial about Easy Ajax-enabled Dependent Dropdown Plugin With jQuery – ssdCascadingDropDown, hope it will help you in programming stack.

Easy Ajax enabled Dependent Dropdown Plugin With jQuery ssdCascadingDropDown - Download Easy Ajax-enabled Dependent Dropdown Plugin With jQuery - ssdCascadingDropDown

File Size:	19.6 KB
Views Total:	9033
Last Update:	06/26/2017 12:58:00 UTC
Publish Date:	07/13/2016 03:49:04 UTC
Official Website:	Go to website
License:	MIT

Demo Download

ssdCascadingDropDown is a jQuery plugin for creating dynamic cascading dropdowns which allow to show/hide select options depending on the changes of other select dropdowns. All the data are stored in the JSON files and will be retrieved via AJAX requests.

Basic usage:

1. Load jQuery library and the jQuery cascading dropdown plugin at the end of the document so the page loads faster.

&lt;script src="//code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="jquery.cascading-drop-down.js"&gt;&lt;/script&gt;

1 2	<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.cascading-drop-down.js"></script>

2. Create a set of select lists that will be converted into cascading dropdowns. Accepted HTML5 data attributes:

data-group: indicates association of the select elements and helps distinguish between different groups where multiple blocks of cascading drop-downs are used
data-target: indicates the select element that should be affected by the value selected from its originator
data-url: url that needs to be called when the change event is triggered on the given select
data-replacement: corresponding container with data-replacement-container – used for replacing additional content with each selection
data-id: the id of the element corresponds to the data-target of the previous element
data-default-label: the default label for the first option item

&lt;select
  name="skill"
  class="cascadingDropDown"

  data-group="skills"
  data-target="javascript"
  data-url="javascript.json"

  &gt;
  &lt;option value=""&gt;Select skills&lt;/option&gt;
  &lt;option value="1"&gt;Ruby&lt;/option&gt;
  &lt;option value="2"&gt;JavaScript&lt;/option&gt;
  &lt;option value="3"&gt;HTML5&lt;/option&gt;
  &lt;option value="4"&gt;CSS3&lt;/option&gt;
  &lt;option value="5"&gt;Python&lt;/option&gt;
&lt;/select&gt;

&lt;select
  name="javascript"
  class="cascadingDropDown"

  data-group="skills"
  data-id="javascript"
  data-target="react"
  data-url="react.json"
  data-default-label="Select..."

  disabled
  &gt;
&lt;/select&gt;

<select

name="skill"

class="cascadingDropDown"

data-group="skills"

data-target="javascript"

data-url="javascript.json"

<option value="">Select skills</option>

<option value="2">JavaScript</option>

<option value="5">Python</option>

</select>

<select

name="javascript"

class="cascadingDropDown"

data-group="skills"

data-id="javascript"

data-target="react"

data-url="react.json"

data-default-label="Select..."

disabled

</select>

3. The JSON structure should be like this:

{
  "success": true,
  "replacement": "Records filtered by the product category and any previous selection",
  "menu": [
    {
      "name": "jQuery",
      "value": "1"
    },
    {
      "name": "Angular",
      "value": "2"
    },
    {
      "name": "React",
      "value": "3"
    },
    {
      "name": "React Native",
      "value": "4"
    },
    {
      "name": "Vue.js",
      "value": "5"
    }
  ]
}

{

"success": true,

"replacement": "Records filtered by the product category and any previous selection",

"menu": [

{

"name": "jQuery",

"value": "1"

{

"name": "Angular",

"value": "2"

{

"name": "React",

"value": "3"

{

"name": "React Native",

"value": "4"

{

"name": "Vue.js",

"value": "5"

}

]

}

4. Initialize the plugin with default options.

$('.cascadingDropDown').ssdCascadingDropDown();

1	$('.cascadingDropDown').ssdCascadingDropDown();

5. All default plugin settings.

$('.cascadingDropDown').ssdCascadingDropDown({

  // custom html data attributes
  attrDataGroup                   : 'group',
  attrDataId                      : 'id',
  attrDataUrl                     : 'url',
  attrDataTarget                  : 'target',
  attrDataDefaultLabel            : 'default-label',
  attrDataReplacement             : 'replacement',
  attrDataReplacementContainer    : 'replacement-container',
  attrDataReplacementDefault      : 'default-content',

  // class associated with the receiving container
  classReplacementContainer       : 'cascadingContainer',

  // json response key to indicate whether the call was successful (true) or not (false)
  indexSuccess                    : 'success',

  // json response key to store the error message
  indexError                      : 'error',

  // json response key to store the new menu items
  index<a href="https://www.jqueryscript.net/menu/">Menu</a>                       : 'menu',

  // json response key to store the replacement for the content container
  indexReplacement                : 'replacement',

  // whether to run verification with instantiation
  verify                          : true,

  // callbacks
  nonFinalCallback                : function(trigger, props, data, self) {},
  finalCallback                   : function(trigger, props, data, self) {},
  errorCallback                   : function(message, data) { console.warn(message); }
  
});

$('.cascadingDropDown').ssdCascadingDropDown({

// custom html data attributes

attrDataGroup : 'group',

attrDataId : 'id',

attrDataUrl : 'url',

attrDataTarget : 'target',

attrDataDefaultLabel : 'default-label',

attrDataReplacement : 'replacement',

attrDataReplacementContainer : 'replacement-container',

attrDataReplacementDefault : 'default-content',

// class associated with the receiving container

classReplacementContainer : 'cascadingContainer',

// json response key to indicate whether the call was successful (true) or not (false)

indexSuccess : 'success',

// json response key to store the error message

indexError : 'error',

// json response key to store the new menu items

index<a href="https://www.jqueryscript.net/menu/">Menu</a> : 'menu',

// json response key to store the replacement for the content container

indexReplacement : 'replacement',

// whether to run verification with instantiation

verify : true,

// callbacks

nonFinalCallback : function(trigger, props, data, self) {},

finalCallback : function(trigger, props, data, self) {},

errorCallback : function(message, data) { console.warn(message); }

});

Change log:

v1.4.3 (2017-06-26)

JS update

This awesome jQuery plugin is developed by sebastiansulinski. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Basic usage:

Change log:

Share this:

Related posts: