Free Download Cascading (Dependent) Dropdown List Plugin – jQuery Chained Selects

This time I will share jQuery Plugin and tutorial about Cascading (Dependent) Dropdown List Plugin – jQuery Chained Selects, hope it will help you in programming stack.

File Size:	8.32 KB
Views Total:	8556
Last Update:	6 months ago
Publish Date:	2 years ago
Official Website:	Go to website
License:	MIT

Demo Download

Chained Selects is a jQuery plugin for creating dependent dropdowns from JSON data that dynamically populates a set of select elements based on the previous selection.

How to use it:

1. Create a normal empty select element on the webpage.

`1`	`<select` `id="example"></select>`

2. Put jQuery library and the JavaScript file jquery.chained.selects.js right before the </body> tag.

1
<script src="/path/to/cdn/jquery.slim.min.js">

2
</script>

3
<script src="jquery.chained.selects.js"></script>

3. Prepare your hierarchical data in the JSON objects.

01
{

02
  "JavaScript": {

03
    "jQuery": {

04
      "1": "<a href="https://www.jqueryscript.net/tags.php?/jQuery UI/">jQuery UI</a>"

05
    },

06
    "React": {

07
      "2": "React Native"

08
    }

09
  },

10
  "HTML": {

11
    "XML": {

12
      "HTML5": {

13
        "3": "HTML5/CSS3"

14
      }

15
    }

16
  },

17
  "More": {

18
    "AA": {

19
      "4": "AAA"

20
    },

21
    "AB": {

22
      "5": "ABA"

23
    },

24
    "AC": {

25
      "ABC": {

26
        "6": "ABCA",

27
        "7": "ABCB"

28
      }

29
    }

30
  }

31
}

4. Activate the plugin and done.

1
$("#example").chainedSelects({

2
  data: myData

3
});

5. Customize the placeholder for the select elements.

1
$("#example").chainedSelects({

2
  data: myData,

3
  placeholder:'jQueryScript'

4
});

6. Set the maximum number of levels of hierarchical data (Default: 10).

1
$("#example").chainedSelects({

2
  data: myData,

3
  maxLevels: 5

4
});

7. Enable/disable the debugg mode (Default: false).

1
$("#example").chainedSelects({

2
  data: myData,

3
  loggingEnabled: true

4
});

8. Set the pre-selected option.

1
$("#example").chainedSelects({

2
  data: myData,

3
  selectedKey: 3

4
});

9. Set the pre-selected option by path.

1
$("#example").chainedSelects({

2
  defaultPath: ["A", "AB"]

3
});

10. Determine whether to sort the list by value..

1
$("#example").chainedSelects({

2
  sortByValue: true

3
});

11. Execute a function on selectection change.

1
$("#example").chainedSelects({

2
  onSelectedCallback: function(data){

3
    // do something

4
  }

5
});

12. Append a CSS class to the selected option. Default: false.

1
$("#example").chainedSelects({

2
  selectCssClass: 'yourClass'

3
});

13. Determine whether to allow automatic pre-selection of option if there is only single one. Default: false.

1
$("#example").chainedSelects({

2
  sautoSelectSingleOptions: true

3
});

14. API methods.

1
// Enable logging. Default: true

2
$("#example").data("chainedSelects").setLoggingEnabled(boolean);

3
 
4
// Change current selected key (integer or string, for either specific choice or category)

5
$("#example").data("chainedSelects").changeSelectedKey(newSelectedKey);

Changelog:

v2.1.0 (2020-09-25)

Added autoSelectSingleOptions option that allow automatic pre-selection of option if there is only single one (works recursively)

v2.0.3 (2020-05-25)

fixed pre-selecting first option when no placeholder is provided

v2.0.2 (2020-04-27)

Extra CSS class

v2.0.1 (2019-09-09)

empty placeholder update

v2.0.0 (2019-07-09)

Code refactor.

v1.0.4 (2019-06-21)

Incorrect default value for sortByValue fixed

v1.0.3 (2018-12-14)

user callback on selectection change.

2018-12-07

hotfix sorting

2018-11-08

Added an option to pre-select option by name/value or path

How to use it:

Changelog:

Share this:

Related posts: