demo of jquery plugin: selectTree

this shows how to use the plugin to display a hierarchy of where child selects are populated when a parent select object is changed.

HTML

<script src="https://rawgithub.com/jamstooks/selecttree/master/jquery.selectTree.js"></script>
<select
    data-callback="populateAuthors"
    data-child="books"
    data-child-callback="populateBooks"
    name="author"
    multiple="multiple"
    id="author">
</select>

<select
    data-child="chapters"
    data-child-callback="populateChapters"
    name="books"
    id="books">
</select>

<select
    name="chapters"
    id="chapters">
</select>

JavaScript

$.populateAuthors = function(callback) {
	callback([
		["Hemmingway", 'h'],
		["Cuelo", 'c']
	]);
};

$.populateBooks = function(parentValue, callback) {
  var optionList = []
  if(parentValue == 'h') {
	  optionList = [
      ['death in the afternoon', 1],
      ['the sun also rises', 2]
    ]
  }
  if(parentValue == 'c') {
	  optionList = [
      ['by the river piedra', 1],
      ['the alchemist', 2]
    ]
  }
  callback(optionList);
};

$.populateChapters = function(parentValue, callback) {
  var optionList = [];
  for(var i=0; i<10; i++) {
	  optionList.push([i, i])
  }
  callback(optionList);
};

var options = {"initialValues": ['h', 1]};
$("#author").selectTree(options);