Just playing with cascading Selectize combo boxes

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.css">
  </head>

  <body>
    <h1>Playing with Selectize</h1>

    <div class="control-group">
			<label for="select-species">Species:</label>
			<select id="select-species"></select>
			<div class="separator">&nbsp;</div>
			<label for="select-animal" style="margin-top: 20px;">Animal:</label>
			<select id="select-animal"></select>
		</div>
		<div id="choice"></div>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
    <script src="script.js"></script>
  </body>

</html>

var timeOutS, timeOUtA;

function updatePlaceholder(selectizeControl, placeholder)
{
  selectizeControl.settings.placeholder = placeholder;
  selectizeControl.updatePlaceholder();
}

var setSpeciesOptions = function (callback)
{
  clearTimeout(timeOutS);

  options =
  [
    { name: 'Cat', id: 'C' }, 
    { name: 'Dog', id: 'D' }, 
    { name: 'Reptile', id: 'R' }
  ];
  updatePlaceholder(speciesSelector, "Pick a species");
  callback(options);
};

var setAnimalOptions = function (callback, value)
{
  clearTimeout(timeOutA);

  var options = [];
  if (value === 'C')
  {
    options =
    [ 
      { name: 'Persan', value: '5' }, 
      { name: 'Lynx', value: '10' }, 
      { name: 'Puma', value: '40' },
      { name: 'Lion', value: '50' },
      { name: 'Tiger', value: '75' }
    ];
  }
  else if (value === 'D')
  {
    options =
    [ 
      { name: 'Chihuahua', value: '2' }, { name: 'Wolf', value: '15' }, { name: 'Danish', value: '20' }
    ];
  }
  else if (value === 'R')
  {
    options =
    [ 
      { name: 'Viper', value: '1' }, 
	  { name: 'Python', value: '2' }, 
	  { name: 'Anaconda', value: '15' }, 
	  { name: 'Varan', value: '50' }
    ];
  }
  callback(options);
  updatePlaceholder(animalSelector, "Pick an animal");
  animalSelector.enable();
};

var speciesSelector = $('#select-species').selectize(
{
  loadingClass: 'selectizeLoading',
  placeholder: "Loading...",
  valueField: 'id',
  labelField: 'name',
  searchField: [ 'name' ],
  onChange: function (value) 
  {
    if (!value.length) return;
    animalSelector.disable();
    animalSelector.clearOptions();
    updatePlaceholder(animalSelector, "Loading...");
    animalSelector.load(function (callback) { timeOutA = setTimeout(setAnimalOptions, 1000, callback, value); });
  }
}).data('selectize');

var animalSelector = $('#select-animal').selectize(
{
  loadingClass: 'selectizeLoading',
  placeholder: "Choose a species to pick an animal",
  closeAfterSelect: true,
  valueField: 'value',
  labelField: 'name',
  searchField: [ 'name' ],
  onChange: function (value) 
  {
    if (!value.length) return;
    $('#choice').text("The selected animal weights: " + value + " kg");
  }
}).data('selectize');

speciesSelector.load(function (callback) { timeOutS = setTimeout(setSpeciesOptions, 1000, callback); });
animalSelector.disable();

/* Styles go here */

label
{
  line-height: 30px;
  margin-left: 4px;
}

.selectizeLoading > .selectize-input, .selectizeLoading > .selectize-input > input
{
  cursor: wait !important;
  font-style: italic;
  background:
     url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif')
     no-repeat
     center center;
}

# Playing with Selectize

- http://brianreavis.github.io/selectize.js/
- https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md
- https://github.com/brianreavis/selectize.js/blob/master/docs/api.md


Just playing with cascading Selectize combo boxes.