Select2

Select2 is a jQuery library that provides customizable select inputs that add functionality otherwise missing from native select elements. Pit Viper includes a theme for Select2 that replace the default styles to align with Pit Viper’s look and feel.

See the Select2 documentation for more info on using Select2.

Set the default width to 100% to ensure the inputs aren’t sized inline by Select2.

$(document).ready(function() {
  $.fn.select2.defaults.set("width", "100%");
});

Single Select

Single select adds type-ahead functionality to a regular select input. You can add an empty option element and set a placeholder value when calling Select2.

Example
A Select2 single select element using the Pit Viper theme.

<select class="js-example-basic-single">
  <option></option>
  <option value="1">Brooklyn Diagnostic Center</option>
  <option value="2">Bayfront Health Brooksville</option>    
  <option value="3">Brookdale Hospital Medical Center</option>    
</select>

<script>
  $(document).ready(function() {
    $('.js-example-basic-single').select2({
      placeholder: 'Select a provider'
    });
  });
</script>

Multi-select

Multi-select displays dismissible tags for each option selected, as well as type-ahead search functionality. You can also set a placeholder value in Select2, but the multi-select does not require you to include an empty option element.

Example
A Select2 multi-select element using the Pit Viper theme.

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="IL">Illinois</option>
  <option value="WY">Wyoming</option>
</select>

<script>
  $(document).ready(function() {
    $('.js-example-basic-multiple').select2({
      placeholder: 'Select a state'
    });
  });
</script>