Multiselect Dropdown With Checkbox & Radio Button - jQuery treeSelection

treeSelection is a treeview like multi-select jQuery plugin that allows the user to select single or multiple options using radio buttons or checkboxes.

Works with either the native <select> element or nested JavaScript array.

See It In Action:

How to use it:

1. Import the jQuery treeSelection plugin's stylesheet and JavaScript.

<link href="/path/to/jquery.treeSelection.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.treeSelection.js"></script>

2. Transform a regular select box into a multiselect component with radio buttons (or checkboxes if the select has the multiple attribute)

<select name="mySelect" class="custom-select" multiple>
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option><option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
</select>

3. Import the jQuery treeSelection plugin's stylesheet and JavaScript.

$(function(){
  $('select[name=mySelect]').treeSelection();
});

4. You're also allowed to define options in a JS array as follows:

<select name="mySelect" class="custom-select">
  
</select>

$('select[name=mySelect]').treeSelection({
  data: [{
    name: 'Google',
    items: [{
      name: 'Search Tools',
      items: ['Google Search', 'Google Alerts', 'Google Scholar']
    },{
      name: 'Advertising Services',
      items: ['Google Ads','AdMob','Google AdSense']
    }]
  }, {
    name: 'Apple',
    items: [{
      name: 'iPhone',
      items: ['iPhone 13','iPhone 12','iPhone SE']
    },{
      name: 'Apple Watch',
      items: ['Watch 7','Watch SE']
    }]
  }, {
    name: 'Amazon',
    items: ['Amazon Prime','Amazon Web Services','Consumer Electronics']
  }]
});

5. Add additional CSS styles and/or classes to the multiselect dropdown.

$('select[name=mySelect]').treeSelection({
  style: '',
  class: '',
});

Changelog:

2022-11-23

• JS Update

---

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