Select2 Examples

<!-- basic -->
<div class="form-group">
  <label for="exampleFormControlInput1">Basic Example</label>
  <select class="js-example-basic-single" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>
<script>
 $(document).ready(function() {
  $(".js-example-basic-single").select2();
 });
</script>

<!-- Multi Select Boxes-->

<div class="form-group">
  <label for="exampleFormControlInput1">Multi Select Boxes</label>
  <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
    <option value="WY">Goku</option>
    <option value="WY">Jane</option>
  </select>
</div>

<script>
$(document).ready(function() {
  $(".js-example-basic-multiple").select2();
});
</script>
<!-- Remote Data-->
<div class="form-group">
  <label for="exampleFormControlInput1">Remote Data</label>
  <select class="js-data-example-ajax"></select>
</div>


<script>
  $(".js-data-example-ajax").select2({
 dropdownParent: $(".main-content-body"),
 ajax: {
  url: "https://api.github.com/search/repositories",
  dataType: "json",
  processResults: function (data) {

   var results = $.map(data.items, function (item) {
    return {
     text: item.name,
     id: item.id
    }
   })
   return {results: results}
  }
 }
});
</script>
<!-- Disabled-->
<div class="form-group">
  <label for="exampleFormControlInput1">Basic Example</label>
  <select class="js-example-disabled" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
  </select>
</div>


<script>
  $(document).ready(function () {
 $(".js-example-disabled").select2({
   disabled:true
 });
});
</script>