Dynamic Dependent Dropdown List Plugin With jQuery - linkedSelect

linkedSelect is a jQuery plugin used to convert passed JSON select options into a dependent (cascading) dropdown list that allows the user to select an option based on a previous selected option.

How to use it:

1. Download and load the jQuery linkedSelect plugin after loading jQuery JavaScript library like this:

<script src="jquery.min.js"></script>
<script src="jquery.linkedSelect.min.js"></script>

2. The basic markup structure for the cascading dropdown lists. Available html data attributes:

• data-select-target: target select box
• data-select-service: JSON data
• data-select-service-asfilter: data filter

<select name="select-1"
        data-select-target="select-2"
        data-select-service="data1.json|GET"
        data-select-service-asfilter="item.minVersion < this.value">
    <option value="">Please select</option>
    <option value="1.1">Please select 1.1</option>
    <option value="1.2">Please select 1.2</option>
    <option value="1.3">Please select 1.3</option>
</select>

<select name="select-2"
        data-select-target="select-3"
        data-select-service="data2.json|GET">
    <option value="">Please select</option>
</select>

<select name="select-3">
    <option value="">Please select</option>
</select>

3. The JSON data should be like this:

{
  "result": true,
  "items" : [
    {
      "text": "Select 2.1",
            "value": "2.1"
    },
    {
      "text": "Select 2.2",
            "value": "2.2",
            "selected": true
    },
    {
      "text": "Select 2.3",
            "value": "2.3"
    },
    {
      "text": "Select 2.4",
            "value": "2.4"
    },
    {
      "text": "Select 2.5",
            "value": "2.5"
    }
    ]
}

4. Initialize the plugin and done.

$.linkedSelect.init();

5. Possible plugin options.

$.linkedSelect.init({
  attrTarget: 'data-select-target',
  attrService: 'data-select-service',
  attrFilter: 'data-select-service-asfilter',
  method: 'POST',
  onBeforeFill: function(source, target, options) {},
  onAfterFill: function(target, source, options) {}
});

Change log:

2016-12-25

• Fixed extension scope

2016-03-03

• Added service data editing

2016-02-25

• Select initial value fix

---

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