Advance Select

Phoenix 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 Choices

Multiple Select Example

<label for="organizerMultiple">Multiple</label>
<select class="form-select" id="organizerMultiple" data-choices="data-choices" multiple="multiple" 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>

Single Select Example

<label for="organizerSingle">Single</label>
<select class="form-select" id="organizerSingle" data-choices="data-choices" 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>

Stylesheet

<pre><code class="language-html">&lt;link href=&quot;vendors/choices/choices.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
<link href="vendors/choices/choices.min.css" rel="stylesheet" />

Javascript

<pre><code class="language-html">&lt;script src=&quot;vendors/choices/choices.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<script src="vendors/choices/choices.min.js"></script>

Thank you for creating with Phoenix|
2023 ©Themewagon

v1.9.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize