Select2

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

For more, please visit the plugin's documentation .

Preview

Basic Example

Placeholders

Disabled results

Hiding the search box

Clear Selection

Single select boxes

Multiple select boxes

Limiting the number of selections

Bootstrap Input Group

.00

<div class="mb-3">
  <h6>Basic Example</h6>
  <select class="lpx_select2">
    <option></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<div class="mb-3">
  <h6>Placeholders</h6>
  <select class="lpx_select2">
    <option></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<div class="mb-3">
  <h6>Disabled results</h6>
  <select class="lpx_select2">
    <option></option>
    <option value="1">Option 1</option>
    <option value="2" disabled="disabled">Option 2 (disabled)</option>
    <option value="3">Option 3</option>
  </select>
</div>

<div class="mb-3">
  <h6>Hiding the search box</h6>
  <select class="lpx_select2_2">
    <option></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<div class="mb-3">
  <h6>Clear Selection</h6>
  <select class="lpx_select2_3">
    <option></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<div class="mb-3">
  <h6>Single select boxes</h6>
  <select class="lpx_select2">
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="1">Alaska</option>
      <option value="2">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
      <option value="1">California</option>
      <option value="2">Nevada</option>
      <option value="3">Oregon</option>
      <option value="3">Washington</option>
    </optgroup>
  </select>
</div>

<div class="mb-3">
  <h6>Multiple select boxes</h6>
  <select class="lpx_select2" multiple="multiple">
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="1">Alaska</option>
      <option value="2">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
      <option value="1">California</option>
      <option value="2">Nevada</option>
      <option value="3">Oregon</option>
      <option value="3">Washington</option>
    </optgroup>
  </select>
</div>

<div class="mb-3">
  <h6>Limiting the number of selections</h6>
  <select class="lpx_select2_1" multiple="multiple">
    <optgroup label="Alaskan/Hawaiian Time Zone">
      <option value="1">Alaska</option>
      <option value="2">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
      <option value="1">California</option>
      <option value="2">Nevada</option>
      <option value="3">Oregon</option>
      <option value="3">Washington</option>
    </optgroup>
  </select>
</div>

<div class="mb-3">
  <h6>Bootstrap Input Group</h6>
  <div class="input-group mb-2">
    <span class="input-group-text"
      ><i class="bi bi-bookmarks-fill opacity-50 fs-5"></i
    ></span>
    <div class="flex-grow-1">
      <select class="lpx_select2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>
  </div>

  <div class="input-group multiple mb-2">
    <div class="flex-grow-1">
      <select class="lpx_select2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>
    <span class="input-group-text" style="border-left: 0 !important"> .00</span>
  </div>

  <div class="input-group multiple mb-2">
    <div class="flex-grow-1">
      <select class="lpx_select2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </div>
    <button class="btn btn-secondary" type="button" id="button-addon2">
      Button
    </button>
  </div>
</div>

$(".lpx_select2").select2({
  theme: "bootstrap-5",
  placeholder: "Select a option",
}),
  $(".lpx_select2_1").select2({
    theme: "bootstrap-5",
    placeholder: "Select a option",
    maximumSelectionLength: 2,
  }),
  $(".lpx_select2_2").select2({
    theme: "bootstrap-5",
    placeholder: "Select a option",
    minimumResultsForSearch: Infinity,
  }),
  $(".lpx_select2_3").select2({
    theme: "bootstrap-5",
    placeholder: "Select a option",
    allowClear: true,
  });

About Privacy Contact