Dynamic Dependent Dropdown List Plugin With jQuery - linkedSelect

File Size: 42.3 KB
Views Total: 15696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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-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 name="select-2"
    <option value="">Please select</option>

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

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.


5. Possible plugin options.

  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:


  • Fixed extension scope


  • Added service data editing


  • 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.