public
Last active

ASPGEMS JS BestPractices - MultiSelects

  • Download Gist
_multi_select.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13
<select name="initiative[collaborator_ids][]" multiple="multiple" id="initiative_collaborator_ids" class="multiselect" style="display: none;">
<option value="5" selected="selected">usuario2@localmail.com</option>
<option value="7">fake_user1@domain.com</option>
<option value="8">fake_user2@domain.com</option>
<option value="9">fake_user3@domain.com</option>
<option value="10">fake_user4@domain.com</option>
<option value="11">fake_user5@domain.com</option>
<option value="12">fake_user6@domain.com</option>
<option value="13">fake_user7@domain.com</option>
<option value="14">fake_user8@domain.com</option>
<option value="15">fake_user9@domain.com</option>
<option value="18">usuario1@localmail.com</option>
</select>
_select_multiple.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<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
JavaScript
1 2 3
// http://quasipartikel.at/multiselect/
$.localise('ui-multiselect', {language: 'es', path: '/javascripts/locale/'});
$("#initiative_collaborator_ids").multiselect({ sortable: true, searchable: true });
multi_select_widget.js
JavaScript
1 2 3 4 5 6 7
// 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
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.