ASPGEMS JS BestPractices - MultiSelects

_multi_select.html

<select name="initiative[collaborator_ids][]" multiple="multiple" id="initiative_collaborator_ids" class="multiselect" style="display: none;">
  <option value="5" selected="selected">[email protected]</option>
  <option value="7">[email protected]</option>
  <option value="8">[email protected]</option>
  <option value="9">[email protected]</option>
  <option value="10">[email protected]</option>
  <option value="11">[email protected]</option>
  <option value="12">[email protected]</option>
  <option value="13">[email protected]</option>
  <option value="14">[email protected]</option>
  <option value="15">[email protected]</option>
  <option value="18">[email protected]</option>
</select>

_select_multiple.html

<p id="related-categories">
  <label for="card_related_categories">Categorías relacionadas</label>
  <select name="card[related_categories][]" multiple="multiple" id="card_related_categories" data-multi-select="true">
    <optgroup label="Brands">
      <option value="card-automotive_brand">Automotive brand</option>
      <option value="card-cosmetics_brand">Cosmetics brand</option>
    </optgroup>
    <optgroup label="Cinema">
      <option value="card-actor">Actor</option>
      <option value="card-character">Character</option>
      <option value="card-director">Director</option>
      <option value="card-movie">Movie</option>
    </optgroup>
  </select>
</p>

multi_select.js

// http://quasipartikel.at/multiselect/
$.localise('ui-multiselect', {language: 'es', path: '/javascripts/locale/'});
$("#initiative_collaborator_ids").multiselect({ sortable: true, searchable: true });

multi_select_widget.js

// Multiselect Widget
// http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
// https://github.com/ehynds/jquery-ui-multiselect-widget
$("#related-categories select[data-multi-select]").multiselect({
  header: false,
  selectedList: 5
});