Events #

  <p>
    Select2 will trigger some events on the original select element,
    allowing you to integrate it with other components. You can find more
    information on events
    <a href="options.html#events">on the options page</a>.
  </p>

  <p>
    <select class="js-states js-example-events form-control"></select>
  </p>

  <p>
    <select class="js-states js-example-events form-control" multiple="multiple"></select>
  </p>

  <p>
    <code>change</code> is fired whenever an option is selected or removed.
  </p>

  <p>
    <code>select2:open</code> is fired whenever the dropdown is opened.
    <code>select2:opening</code> is fired before this and can be prevented.
  </p>

  <p>
    <code>select2:close</code> is fired whenever the dropdown is closed.
    <code>select2:closing</code> is fired before this and can be prevented.
  </p>

  <p>
    <code>select2:select</code> is fired whenever a result is selected.
    <code>select2:selecting</code> is fired before this and can be prevented.
  </p>

  <p>
    <code>select2:unselect</code> is fired whenever a result is unselected.
    <code>select2:unselecting</code> is fired before this and can be prevented.
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <ul class="js-event-log"></ul>

  <pre data-fill-from=".js-code-events"></pre>

</div>

  <p>
    Select2 can be used to quickly set up fields used for tagging.
  </p>

  <p>
    <select class="js-example-tags form-control" multiple="multiple">
      <option selected="selected">orange</option>
      <option>white</option>
      <option selected="selected">purple</option>
    </select>
  </p>

  <p>
    Note that when tagging is enabled the user can select from pre-existing
    options or create a new tag by picking the first choice, which is what
    the user has typed into the search box so far.
  </p>

</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-tags"></pre>

</div>

  <p>
    Select2 supports ability to add choices automatically as the user is
    typing into the search field. Try typing in the search field below and
    entering a space or a comma.
  </p>

  <p>
    <select class="js-example-tokenizer form-control" multiple="multiple">
      <option>red</option>
      <option>blue</option>
      <option>green</option>
    </select>
  </p>

  <p>
    The separators that should be used when tokenizing can be specified
    using the <a href="options.html#tokenSeparators">tokenSeparators</a>
    options.
  </p>

</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-tokenizer"></pre>

</div>

  <p>
    Unlike other dropdowns on this page, this one matches options only if
    the term appears in the beginning of the string as opposed to anywhere:
  </p>

  <p>
    <select class="js-example-matcher-start js-states form-control"></select>
  </p>

  <p>
    This custom matcher uses a
    <a href="options.html#compat-matcher">compatibility module</a> that is
    only bundled in the
    <a href="index.html#builds-full">full version of Select2</a>. You also
    have the option of using a
    <a href="options.html#matcher">more complex matcher</a>.
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-matcher-start"></pre>

</div>

  <p>
    Select2's default matcher will ignore diacritics, making it easier for
    users to filter results in international selects. Type "aero" into the
    select below.
  </p>

  <p>
    <select class="js-example-diacritics form-control">
      <option>Aeróbics</option>
      <option>Aeróbics en Agua</option>
      <option>Aerografía</option>
      <option>Aeromodelaje</option>
      <option>Águilas</option>
      <option>Ajedrez</option>
      <option>Ala Delta</option>
      <option>Álbumes de Música</option>
      <option>Alusivos</option>
      <option>Análisis de Escritura a Mano</option>
    </select>
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-diacritics"></pre>

</div>

  <p>
    Select2 supports displaying the messages in different languages, as well
    as providing your own
    <a href="options.html#language">custom messages</a>
    that can be displayed.
  </p>

  <p>
    <select class="js-example-language js-states form-control">
    </select>
  </p>

  <p>
    The language does not have to be defined when Select2 is being
    initialized, but instead can be defined in the <code>[lang]</code>
    attribute of any parent elements as <code>[lang="es"]</code>.
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-language"></pre>

</div>

  <p>
    Select2 supports custom themes using the
    <a href="options.html#theme">theme option</a>
    so you can style Select2 to match the rest of your application.
  </p>

  <p>
    <select class="js-example-theme-single js-states form-control">
    </select>
  </p>

  <p>
    These are using the <code>classic</code> theme, which matches the old
    look of Select2.
  </p>

  <p>
    <select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-theme"></pre>

</div>

  <p>
    Select2 will work on RTL websites if the <code>dir</code> attribute is
    set on the <code><select></code> or any parents of it.
  </p>

  <p>
    <select class="js-example-rtl js-states form-control" dir="rtl"></select>
  </p>

  <p>
    You can also use initialize Select2 with <code>dir: "rtl"</code> set.
  </p>
</div>
<div class="col-md-8">
  <h2>Example code</h2>

  <pre data-fill-from=".js-code-rtl"></pre>

</div>