Using Events

Using Events

Check out the console for more details about each event.

States:Select a state...AlabamaAlaskaArizonaArkansasCaliforniaColoradoConnecticutDelawareDistrict of ColumbiaFloridaGeorgiaHawaiiIdahoIllinoisIndianaIowaKansasKentuckyLouisianaMaineMarylandMassachusettsMichiganMinnesotaMississippiMissouriMontanaNebraskaNevadaNew HampshireNew JerseyNew MexicoNew YorkNorth CarolinaNorth DakotaOhioOklahomaOregonPennsylvaniaRhode IslandSouth CarolinaSouth DakotaTennesseeTexasUtahVermontVirginiaWashingtonWest VirginiaWisconsinWyoming

Event Log

Html

<div class="control-group">
  <label for="select-state">States:</label>
  <select id="select-state" multiple name="state[]" class="demo-default">
    <option value="">Select a state...</option>
    <option value="AL">Alabama</option>
    ***
    <option value="WY" selected>Wyoming</option>
  </select>
</div>

Javascript

var eventHandler = function(name) {
  return function() {
    console.log(name, arguments);
    $('#log').append('<div><span class="name">' + name + '</span></div>');
  };
};
var $select = $('#select-state').selectize({
  create          : true,
  onChange        : eventHandler('onChange'),
  onItemAdd       : eventHandler('onItemAdd'),
  onItemRemove    : eventHandler('onItemRemove'),
  onOptionAdd     : eventHandler('onOptionAdd'),
  onOptionRemove  : eventHandler('onOptionRemove'),
  onDropdownOpen  : eventHandler('onDropdownOpen'),
  onDropdownClose : eventHandler('onDropdownClose'),
  onFocus         : eventHandler('onFocus'),
  onBlur          : eventHandler('onBlur'),
  onInitialize    : eventHandler('onInitialize'),
});