Select2

Select2 can take a regular select box. By default it supports all options and operations that are available in a standard select box,but with added flexibility. For more details

Single Select Boxes
HTML Code
<select class="select2-basic-single js-states form-select form-control" name="state" style="width: 100%;">
      <option value="AL">Alabama</option>
      <option value="Am">Amalapuram</option>
      <option value="Arizona">Arizona</option>
      <option value="Colorada">Colorada</option>
      <option value="Idaho">Idaho</option>
      <option value="Montana">Montana</option>                                   
      <option value="An">Anakapalli</option>
      <option value="Ak">Akkayapalem</option>
      <option value="Nebraska">Nebraska</option>
      <option value="New Maxico">New Maxico</option>
      <option value="North Dakota">North Dakota</option>
      <option value="Utah">Utah</option>
      <option value="Wyoming">Wyoming</option>
</select>

Script

$(".select2-basic-single").select2();
// tags
$(".select2-basic-single-tag").select2({
    tags: true
});
Multiple Select Boxes
HTML Code
<select class="select2-basic-multiple js-states form-control" name="states[]" multiple="multiple" style="width: 100%;">
    <optgroup label="pacific Time zone">
    <option value="California">California</option>
    <option value="Nevada">Nevada</option>
    <option value="Oregon">Oregon</option>
    <option value="Washington">Washington</option>
    </optgroup>
    <optgroup label="Mountain Time zone">
    <option value="Arizona">Arizona</option>
    <option value="Colorada">Colorada</option>
    <option value="Idaho">Idaho</option>
    <option value="Montana">Montana</option>
    <option value="Nebraska">Nebraska</option>
    <option value="New Maxico">New Maxico</option>
    <option value="North Dakota">North Dakota</option>
    <option value="Utah">Utah</option>
    <option value="Wyoming">Wyoming</option>
    </optgroup>
    <optgroup label="Central Time zone">
    <option value="Alabama">Alabama</option>
    <option value="Arkansas">Arkansas</option>
    <option value="Lowa">Lowa</option>
    <option value="Kansas">Kansas</option>
    <option value="Missouri">Missouri</option>
    <option value="Texas">Texas</option>
    <option value="South Dakota">South Dakota</option>
    <option value="Kentucky">Kentucky</option>
    <option value="Illinois">Illinois</option>
    </optgroup>
</select>

Script

$(".select2-basic-multiple").select2();

//disable
var $disabledResults = $(".select2-disabled ");
$disabledResults.select2();

//placeholder
$('.select2-placeholder').select2({
  placeholder: "Select a State",
  allowClear: true
});
//maximum input number

$(".select2-multiple-limit").select2({
  maximumSelectionLength: 3
});

//theme
$(".select2-theme-single").select2({
  theme: "classic"
});
Previous Next