Dependent/Cascading Select List with jQuery Plugin

JQuery plug-in to display populated sequential selections from hierarchical JSON data. Chained Selects is a jQuery plugin for creating dependent dropdown lists from JSON data that dynamically populate a set of selected items based on a previous selection.

jquery custom select dropdown, select box with search option in jquery without plugin, jquery nice select with search, jquery select dropdown, jquery select plugin

How to make use of it:

1. Create a standard empty choose aspect on the webpage.

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

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

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

3. Prepare your hierarchical information within the JSON objects.

{
  "JavaScript": {
    "jQuery": {
      "1": "<a href="#!">jQuery UI</a>"
    },
    "React": {
      "2": "React Native"
    }
  },
  "HTML": {
    "XML": {
      "HTML5": {
        "3": "HTML5/CSS3"
      }
    }
  },
  "More": {
    "AA": {
      "4": "AAA"
    },
    "AB": {
      "5": "ABA"
    },
    "AC": {
      "ABC": {
        "6": "ABCA",
        "7": "ABCB"
      }
    }
  }
}

4. Activate the plugin and completed it.

$("#example").chainedSelects({
  data: myData
});

5. Customize the placeholder for the choose parts.

$("#example").chainedSelects({
  data: myData,
  placeholder:'jQueryScript'
});

6. Set the maximum variety of ranges of hierarchical information.

$("#example").chainedSelects({
  data: myData,
  maxLevels: 5
});

7. Enable/disable the debug mode.

$("#example").chainedSelects({
  data: myData,
  loggingEnabled: true
});

8. Set the pre-selected choice.

$("#example").chainedSelects({
  data: myData,
  selectedKey: 3
});

9. Set the pre-selected possibility by the path.

$("#example").chainedSelects({
  defaultPath: ["A", "AB"]
});

10. Determine whether or not to sort the listing by value.

$("#example").chainedSelects({
  sortByValue: true
});

11. Execute a function on selection change.

$("#example").chainedSelects({
  onSelectedCallback: function(data){
    // do something
  }
});

12. Append a CSS class to the chosen possibility.

$("#example").chainedSelects({
  selectCssClass: 'yourClass'
});

13. Determine whether or not to allow computerized pre-selection of choice if there’s only a single one.

$("#example").chainedSelects({
  sautoSelectSingleOptions: true
});

14. API strategies.

// Enable logging. Default: true
$("#example").data("chainedSelects").setLoggingEnabled(boolean);

// Change current selected key (integer or string, for either specific choice or category)
$("#example").data("chainedSelects").changeSelectedKey(newSelectedKey);

Cascading Dropdown List Plugin, Chained Selects jQuery Plugin/Github, jquery multiselect dropdown with search, jquery popup select list, filter drop down list using jquery