Advance Select
Falcon uses Choices.js for advance select. Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency
Documentation for ChoicesFrom Falcon 3.13.0 we are intruducing advance selects using jQuery Select2.
California Institute of Technology
GSAS Open Labs At Harvard
Massachusetts Institute of Technology
University of Chicago
<label for="organizerMultiple">Multiple</label><select class="form-select js-choice" id="organizerMultiple" multiple="multiple" size="1" name="organizerMultiple" data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select organizer...</option>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology</option>
</select>Select organizer...
Select organizer...
California Institute of Technology
GSAS Open Labs At Harvard
Massachusetts Institute of Technology
University of Chicago
<label for="organizerSingle">Single</label><select class="form-select js-choice" id="organizerSingle" size="1" name="organizerSingle" data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select organizer...</option>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology </option>
</select><form class="needs-validation" novalidate="novalidate">
<div class="mb-3"><label for="organizerMultiple2">Multiple</label><select class="form-select js-choice" id="organizerMultiple2" multiple="multiple" size="1" name="organizerMultiple" required="required" data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select organizer...</option>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology</option>
</select>
<div class="invalid-feedback">Please select one or multiple</div>
</div>
<div class="mb-3"><label for="organizerSingle2">Single</label><select class="form-select js-choice" id="organizerSingle2" size="1" required="required" name="organizerSingle" data-options='{"removeItemButton":true,"placeholder":true}'>
<option value="">Select organizer...</option>
<option>Massachusetts Institute of Technology</option>
<option>University of Chicago</option>
<option>GSAS Open Labs At Harvard</option>
<option>California Institute of Technology </option>
</select>
<div class="invalid-feedback">Please select one</div>
</div><button class="btn btn-primary" type="submit">Submit form</button>
</form>Stylesheet
<link href="vendors/choices/choices.min.css" rel="stylesheet" />Javascript
<script src="vendors/choices/choices.min.js"></script>
