Logo

Select2 Examples


       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">
          Select2 Examples
         </h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Basic Example</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_1" name="param">
             <option value="AK">Alaska</option>
             <option value="HI">Hawaii</option>
             <option value="CA">California</option>
             <option value="NV">Nevada</option>
             <option value="OR">Oregon</option>
             <option value="WA">Washington</option>
             <option value="AZ">Arizona</option>
             <option value="CO">Colorado</option>
             <option value="ID">Idaho</option>
             <option value="MT">Montana</option>
             <option value="NE">Nebraska</option>
             <option value="NM">New Mexico</option>
             <option value="ND">North Dakota</option>
             <option value="UT">Utah</option>
             <option value="WY">Wyoming</option>
             <option value="AL">Alabama</option>
             <option value="AR">Arkansas</option>
             <option value="IL">Illinois</option>
             <option value="IA">Iowa</option>
             <option value="KS">Kansas</option>
             <option value="KY">Kentucky</option>
             <option value="LA">Louisiana</option>
             <option value="MN">Minnesota</option>
             <option value="MS">Mississippi</option>
             <option value="MO">Missouri</option>
             <option value="OK">Oklahoma</option>
             <option value="SD">South Dakota</option>
             <option value="TX">Texas</option>
             <option value="TN">Tennessee</option>
             <option value="WI">Wisconsin</option>
             <option value="CT">Connecticut</option>
             <option value="DE">Delaware</option>
             <option value="FL">Florida</option>
             <option value="GA">Georgia</option>
             <option value="IN">Indiana</option>
             <option value="ME">Maine</option>
             <option value="MD">Maryland</option>
             <option value="MA">Massachusetts</option>
             <option value="MI">Michigan</option>
             <option value="NH">New Hampshire</option>
             <option value="NJ">New Jersey</option>
             <option value="NY">New York</option>
             <option value="NC">North Carolina</option>
             <option value="OH">Ohio</option>
             <option value="PA">Pennsylvania</option>
             <option value="RI">Rhode Island</option>
             <option value="SC">South Carolina</option>
             <option value="VT">Vermont</option>
             <option value="VA">Virginia</option>
             <option value="WV">West Virginia</option>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Nested Example</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_2" name="param">
             <optgroup label="Alaskan/Hawaiian Time Zone">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
             </optgroup>
             <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV" selected>Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
             </optgroup>
             <optgroup label="Mountain Time Zone">
              <option value="AZ">Arizona</option>
              <option value="CO">Colorado</option>
              <option value="ID">Idaho</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NM">New Mexico</option>
              <option value="ND">North Dakota</option>
              <option value="UT">Utah</option>
              <option value="WY">Wyoming</option>
             </optgroup>
             <optgroup label="Central Time Zone">
              <option value="AL">Alabama</option>
              <option value="AR">Arkansas</option>
              <option value="IL">Illinois</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="OK">Oklahoma</option>
              <option value="SD">South Dakota</option>
              <option value="TX">Texas</option>
              <option value="TN">Tennessee</option>
              <option value="WI">Wisconsin</option>
             </optgroup>
             <optgroup label="Eastern Time Zone">
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="IN">Indiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="OH">Ohio</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WV">West Virginia</option>
             </optgroup>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Multi Select</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_3" name="param" multiple="multiple">
             <optgroup label="Alaskan/Hawaiian Time Zone">
              <option value="AK" selected>Alaska</option>
              <option value="HI">Hawaii</option>
             </optgroup>
             <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV" selected>Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
             </optgroup>
             <optgroup label="Mountain Time Zone">
              <option value="AZ">Arizona</option>
              <option value="CO">Colorado</option>
              <option value="ID">Idaho</option>
              <option value="MT" selected>Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NM">New Mexico</option>
              <option value="ND">North Dakota</option>
              <option value="UT">Utah</option>
              <option value="WY">Wyoming</option>
             </optgroup>
             <optgroup label="Central Time Zone">
              <option value="AL">Alabama</option>
              <option value="AR">Arkansas</option>
              <option value="IL">Illinois</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="OK">Oklahoma</option>
              <option value="SD">South Dakota</option>
              <option value="TX">Texas</option>
              <option value="TN">Tennessee</option>
              <option value="WI">Wisconsin</option>
             </optgroup>
             <optgroup label="Eastern Time Zone">
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="IN">Indiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="OH">Ohio</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WV">West Virginia</option>
             </optgroup>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Placeholder</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_4" name="param">
             <option label="Label"></option>
             <optgroup label="Alaskan/Hawaiian Time Zone">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
             </optgroup>
             <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
             </optgroup>
             <optgroup label="Mountain Time Zone">
              <option value="AZ">Arizona</option>
              <option value="CO">Colorado</option>
              <option value="ID">Idaho</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NM">New Mexico</option>
              <option value="ND">North Dakota</option>
              <option value="UT">Utah</option>
              <option value="WY">Wyoming</option>
             </optgroup>
             <optgroup label="Central Time Zone">
              <option value="AL">Alabama</option>
              <option value="AR">Arkansas</option>
              <option value="IL">Illinois</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="OK">Oklahoma</option>
              <option value="SD">South Dakota</option>
              <option value="TX">Texas</option>
              <option value="TN">Tennessee</option>
              <option value="WI">Wisconsin</option>
             </optgroup>
             <optgroup label="Eastern Time Zone">
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="IN">Indiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="OH">Ohio</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WV">West Virginia</option>
             </optgroup>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Array Data</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_5" name="param">
             <option value="2" selected="selected">Duplicate</option>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Remote Data</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_6" name="param">
             <option label="Label"></option>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Disabled Mode</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_7" disabled="disabled" name="param">
             <option label="Label"></option>
             <optgroup label="Alaskan/Hawaiian Time Zone">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
             </optgroup>
             <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV" selected>Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
             </optgroup>
             <optgroup label="Mountain Time Zone">
              <option value="AZ">Arizona</option>
              <option value="CO">Colorado</option>
              <option value="ID">Idaho</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NM">New Mexico</option>
              <option value="ND">North Dakota</option>
              <option value="UT">Utah</option>
              <option value="WY">Wyoming</option>
             </optgroup>
             <optgroup label="Central Time Zone">
              <option value="AL">Alabama</option>
              <option value="AR">Arkansas</option>
              <option value="IL">Illinois</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="OK">Oklahoma</option>
              <option value="SD">South Dakota</option>
              <option value="TX">Texas</option>
              <option value="TN">Tennessee</option>
              <option value="WI">Wisconsin</option>
             </optgroup>
             <optgroup label="Eastern Time Zone">
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="IN">Indiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="OH">Ohio</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WV">West Virginia</option>
             </optgroup>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Disabled Results</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_8" name="param">
             <option label="Label"></option>
             <option value="one">First</option>
             <option value="two" disabled="disabled">Second (disabled)</option>
             <option value="three">Third</option>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Limiting Selections</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_9" name="param" multiple>
             <option label="Label"></option>
             <optgroup label="Alaskan/Hawaiian Time Zone">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
             </optgroup>
             <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV" selected>Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
             </optgroup>
             <optgroup label="Mountain Time Zone">
              <option value="AZ">Arizona</option>
              <option value="CO">Colorado</option>
              <option value="ID">Idaho</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NM">New Mexico</option>
              <option value="ND">North Dakota</option>
              <option value="UT">Utah</option>
              <option value="WY">Wyoming</option>
             </optgroup>
             <optgroup label="Central Time Zone">
              <option value="AL">Alabama</option>
              <option value="AR">Arkansas</option>
              <option value="IL">Illinois</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="OK">Oklahoma</option>
              <option value="SD">South Dakota</option>
              <option value="TX">Texas</option>
              <option value="TN">Tennessee</option>
              <option value="WI">Wisconsin</option>
             </optgroup>
             <optgroup label="Eastern Time Zone">
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="IN">Indiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="OH">Ohio</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WV">West Virginia</option>
             </optgroup>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Hiding Search box</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_10" name="param">
             <option label="Label"></option>
             <optgroup label="Alaskan/Hawaiian Time Zone">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
             </optgroup>
             <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
             </optgroup>
             <optgroup label="Mountain Time Zone">
              <option value="AZ">Arizona</option>
              <option value="CO">Colorado</option>
              <option value="ID">Idaho</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NM">New Mexico</option>
              <option value="ND">North Dakota</option>
              <option value="UT">Utah</option>
              <option value="WY">Wyoming</option>
             </optgroup>
             <optgroup label="Central Time Zone">
              <option value="AL">Alabama</option>
              <option value="AR">Arkansas</option>
              <option value="IL">Illinois</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="OK">Oklahoma</option>
              <option value="SD">South Dakota</option>
              <option value="TX">Texas</option>
              <option value="TN">Tennessee</option>
              <option value="WI">Wisconsin</option>
             </optgroup>
             <optgroup label="Eastern Time Zone">
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="IN">Indiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="OH">Ohio</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WV">West Virginia</option>
             </optgroup>
            </select>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Tagging Support</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <select class="form-control select2" id="kt_select2_11" multiple name="param">
             <option label="Label"></option>
             <optgroup label="Alaskan/Hawaiian Time Zone">
              <option value="AK">Alaska</option>
              <option value="HI">Hawaii</option>
             </optgroup>
             <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
              <option value="OR">Oregon</option>
              <option value="WA">Washington</option>
             </optgroup>
             <optgroup label="Mountain Time Zone">
              <option value="AZ">Arizona</option>
              <option value="CO">Colorado</option>
              <option value="ID">Idaho</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NM">New Mexico</option>
              <option value="ND">North Dakota</option>
              <option value="UT">Utah</option>
              <option value="WY">Wyoming</option>
             </optgroup>
             <optgroup label="Central Time Zone">
              <option value="AL">Alabama</option>
              <option value="AR">Arkansas</option>
              <option value="IL">Illinois</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="OK">Oklahoma</option>
              <option value="SD">South Dakota</option>
              <option value="TX">Texas</option>
              <option value="TN">Tennessee</option>
              <option value="WI">Wisconsin</option>
             </optgroup>
             <optgroup label="Eastern Time Zone">
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="IN">Indiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="OH">Ohio</option>
              <option value="PA">Pennsylvania</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WV">West Virginia</option>
             </optgroup>
            </select>
           </div>
          </div>

          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
           <div class=" col-lg-4 col-md-9 col-sm-12">
            <a href="" class="btn btn-light-primary font-weight-bold" data-toggle="modal" data-target="#kt_select2_modal">Launch modal select2</a>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-9 ml-lg-auto">
            <button type="reset" class="btn btn-primary mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>
        <!--end::Form-->
       </div>
      

      // Class definition
      var KTSelect2 = function() {
       // Private functions
       var demos = function() {
        // basic
        $('#kt_select2_1').select2({
         placeholder: "Select a state"
        });

        // nested
        $('#kt_select2_2').select2({
         placeholder: "Select a state"
        });

        // multi select
        $('#kt_select2_3').select2({
         placeholder: "Select a state",
        });

        // basic
        $('#kt_select2_4').select2({
         placeholder: "Select a state",
         allowClear: true
        });

        // loading data from array
        var data = [{
         id: 0,
         text: 'Enhancement'
        }, {
         id: 1,
         text: 'Bug'
        }, {
         id: 2,
         text: 'Duplicate'
        }, {
         id: 3,
         text: 'Invalid'
        }, {
         id: 4,
         text: 'Wontfix'
        }];

        $('#kt_select2_5').select2({
         placeholder: "Select a value",
         data: data
        });

        // loading remote data

        function formatRepo(repo) {
         if (repo.loading) return repo.text;
         var markup = "<div class='select2-result-repository clearfix'>" +
          "<div class='select2-result-repository__meta'>" +
          "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
         if (repo.description) {
          markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
         }
         markup += "<div class='select2-result-repository__statistics'>" +
          "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
          "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
          "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
          "</div>" +
          "</div></div>";
         return markup;
        }

        function formatRepoSelection(repo) {
         return repo.full_name || repo.text;
        }

        $("#kt_select2_6").select2({
         placeholder: "Search for git repositories",
         allowClear: true,
         ajax: {
          url: "https://api.github.com/search/repositories",
          dataType: 'json',
          delay: 250,
          data: function(params) {
           return {
            q: params.term, // search term
            page: params.page
           };
          },
          processResults: function(data, params) {
           // parse the results into the format expected by Select2
           // since we are using custom formatting functions we do not need to
           // alter the remote JSON data, except to indicate that infinite
           // scrolling can be used
           params.page = params.page || 1;

           return {
            results: data.items,
            pagination: {
             more: (params.page * 30) < data.total_count
            }
           };
          },
          cache: true
         },
         escapeMarkup: function(markup) {
          return markup;
         }, // let our custom formatter work
         minimumInputLength: 1,
         templateResult: formatRepo, // omitted for brevity, see the source of this page
         templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
        });

        // custom styles

        // tagging support
        $('#kt_select2_12_1, #kt_select2_12_2, #kt_select2_12_3, #kt_select2_12_4').select2({
         placeholder: "Select an option",
        });

        // disabled mode
        $('#kt_select2_7').select2({
         placeholder: "Select an option"
        });

        // disabled results
        $('#kt_select2_8').select2({
         placeholder: "Select an option"
        });

        // limiting the number of selections
        $('#kt_select2_9').select2({
         placeholder: "Select an option",
         maximumSelectionLength: 2
        });

        // hiding the search box
        $('#kt_select2_10').select2({
         placeholder: "Select an option",
         minimumResultsForSearch: Infinity
        });

        // tagging support
        $('#kt_select2_11').select2({
         placeholder: "Add a tag",
         tags: true
        });

        // disabled results
        $('.kt-select2-general').select2({
         placeholder: "Select an option"
        });
       }

       var modalDemos = function() {
        $('#kt_select2_modal').on('shown.bs.modal', function () {
         // basic
         $('#kt_select2_1_modal').select2({
          placeholder: "Select a state"
         });

         // nested
         $('#kt_select2_2_modal').select2({
          placeholder: "Select a state"
         });

         // multi select
         $('#kt_select2_3_modal').select2({
          placeholder: "Select a state",
         });

         // basic
         $('#kt_select2_4_modal').select2({
          placeholder: "Select a state",
          allowClear: true
         });
        });
       }

       // Public functions
       return {
        init: function() {
         demos();
         modalDemos();
        }
       };
      }();

      // Initialization
      jQuery(document).ready(function() {
       KTSelect2.init();
      });
      

Validation State Examples


    <div class="form-group row">
     <label class="col-form-label text-right col-lg-3 col-sm-12">Valid State</label>
     <div class=" col-lg-4 col-md-9 col-sm-12">
      <select class="form-control select2 is-valid" id="kt_select2_1_validate" name="param">
       <option value="AK"></option>
       <option value="HI">Hawaii</option>
       <option value="CA">California</option>
       <option value="NV">Nevada</option>
       <option value="OR">Oregon</option>
       <option value="WA">Washington</option>
       <option value="AZ">Arizona</option>
       <option value="CO">Colorado</option>
       <option value="ID">Idaho</option>
       <option value="MT">Montana</option>
       <option value="NE">Nebraska</option>
       <option value="NM">New Mexico</option>
       <option value="ND">North Dakota</option>
       <option value="UT">Utah</option>
       <option value="WY">Wyoming</option>
       <option value="AL">Alabama</option>
       <option value="AR">Arkansas</option>
       <option value="IL">Illinois</option>
       <option value="IA">Iowa</option>
       <option value="KS">Kansas</option>
       <option value="KY">Kentucky</option>
       <option value="LA">Louisiana</option>
       <option value="MN">Minnesota</option>
       <option value="MS">Mississippi</option>
       <option value="MO">Missouri</option>
       <option value="OK">Oklahoma</option>
       <option value="SD">South Dakota</option>
       <option value="TX">Texas</option>
       <option value="TN">Tennessee</option>
       <option value="WI">Wisconsin</option>
       <option value="CT">Connecticut</option>
       <option value="DE">Delaware</option>
       <option value="FL">Florida</option>
       <option value="GA">Georgia</option>
       <option value="IN">Indiana</option>
       <option value="ME">Maine</option>
       <option value="MD">Maryland</option>
       <option value="MA">Massachusetts</option>
       <option value="MI">Michigan</option>
       <option value="NH">New Hampshire</option>
       <option value="NJ">New Jersey</option>
       <option value="NY">New York</option>
       <option value="NC">North Carolina</option>
       <option value="OH">Ohio</option>
       <option value="PA">Pennsylvania</option>
       <option value="RI">Rhode Island</option>
       <option value="SC">South Carolina</option>
       <option value="VT">Vermont</option>
       <option value="VA">Virginia</option>
       <option value="WV">West Virginia</option>
      </select>
      <div class="valid-feedback">Success! You've done it.</div>
      <span class="form-text text-muted">Example help text that remains unchanged.</span>
     </div>
    </div>
    <div class="form-group row">
     <label class="col-form-label text-right col-lg-3 col-sm-12">Invalid State</label>
     <div class=" col-lg-4 col-md-9 col-sm-12">
      <select class="form-control select2 is-invalid" id="kt_select2_2_validate" name="param">
       <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
       </optgroup>
       <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV" selected>Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
       </optgroup>
       <optgroup label="Mountain Time Zone">
        <option value="AZ">Arizona</option>
        <option value="CO">Colorado</option>
        <option value="ID">Idaho</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NM">New Mexico</option>
        <option value="ND">North Dakota</option>
        <option value="UT">Utah</option>
        <option value="WY">Wyoming</option>
       </optgroup>
       <optgroup label="Central Time Zone">
        <option value="AL">Alabama</option>
        <option value="AR">Arkansas</option>
        <option value="IL">Illinois</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="OK">Oklahoma</option>
        <option value="SD">South Dakota</option>
        <option value="TX">Texas</option>
        <option value="TN">Tennessee</option>
        <option value="WI">Wisconsin</option>
       </optgroup>
       <optgroup label="Eastern Time Zone">
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="IN">Indiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="OH">Ohio</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WV">West Virginia</option>
       </optgroup>
      </select>
      <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
      <span class="form-text text-muted">Example help text that remains unchanged.</span>
     </div>
    </div>
    
Success! You've done it.
Example help text that remains unchanged.
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo