Создание раскрывающегося списка динамического состояния

selectize.js от Брайана Ривиса добавляет простоты использования и интерактивности, которых не хватает большинству веб-форм. В этой статье вы узнаете, как добавить раскрывающийся список динамического состояния в формы с помощью selectize.js.

Шаг 1

Добавьте приведенный ниже HTML-код туда, где вы хотите заполнить раскрывающийся список.

<div class="container">
   <div id="wrapper">
      <div class="demo">
         <h2>Choose a State</h2>
         <div class="control-group">
            <label for="select-beast">State:</label>
            <select id="select-state" placeholder="Pick a state...">
               <option value="">Select a state...</option>
               <option value="AL">Alabama</option>
               <option value="AK">Alaska</option>
               <option value="AZ">Arizona</option>
               <option value="AR">Arkansas</option>
               <option value="CA">California</option>
               <option value="CO">Colorado</option>
               <option value="CT">Connecticut</option>
               <option value="DE">Delaware</option>
               <option value="DC">District of Columbia</option>
               <option value="FL">Florida</option>
               <option value="GA">Georgia</option>
               <option value="HI">Hawaii</option>
               <option value="ID">Idaho</option>
               <option value="IL">Illinois</option>
               <option value="IN">Indiana</option>
               <option value="IA">Iowa</option>
               <option value="KS">Kansas</option>
               <option value="KY">Kentucky</option>
               <option value="LA">Louisiana</option>
               <option value="ME">Maine</option>
               <option value="MD">Maryland</option>
               <option value="MA">Massachusetts</option>
               <option value="MI">Michigan</option>
               <option value="MN">Minnesota</option>
               <option value="MS">Mississippi</option>
               <option value="MO">Missouri</option>
               <option value="MT">Montana</option>
               <option value="NE">Nebraska</option>
               <option value="NV">Nevada</option>
               <option value="NH">New Hampshire</option>
               <option value="NJ">New Jersey</option>
               <option value="NM">New Mexico</option>
               <option value="NY">New York</option>
               <option value="NC">North Carolina</option>
               <option value="ND">North Dakota</option>
               <option value="OH">Ohio</option>
               <option value="OK">Oklahoma</option>
               <option value="OR">Oregon</option>
               <option value="PA">Pennsylvania</option>
               <option value="RI">Rhode Island</option>
               <option value="SC">South Carolina</option>
               <option value="SD">South Dakota</option>
               <option value="TN">Tennessee</option>
               <option value="TX">Texas</option>
               <option value="UT">Utah</option>
               <option value="VT">Vermont</option>
               <option value="VA">Virginia</option>
               <option value="WA">Washington</option>
               <option value="WV">West Virginia</option>
               <option value="WI">Wisconsin</option>
               <option value="WY">Wyoming</option>
            </select>
         </div>
      </div>
   </div>
</div>

Шаг 2

Добавьте приведенный ниже CSS в основную таблицу стилей вашего веб-сайта.

.selectize-control::before {
        -moz-transition: opacity 0.2s;
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
        content: ' ';
        z-index: 2;
        position: absolute;
        display: block;
        top: 12px;
        right: 34px;
        width: 16px;
        height: 16px;
        background: url(images/spinner.gif);
        background-size: 16px 16px;
        opacity: 0;
}
.selectize-control.loading::before {
        opacity: 0.4;
}

Шаг 3

Скопируйте и вставьте приведенный ниже код JavaScript в файл с именем state.js.

window.onload=function(){
        var xhr;
        var select_state, $select_state;
        var select_city, $select_city;
$select_state = $('#select-state').selectize({
        onChange: function(value) {
                  if (!value.length) return;
                  select_city.disable();
                  select_city.clearOptions();
                  select_city.load(function(callback) {
                         xhr && xhr.abort();
                         xhr = $.ajax({
                         url: 'http://www.corsproxy.com/api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json',
                                        success: function(results) {
                                                select_city.enable();
                                                callback(results);
                                        },
                                        error: function() {
                                                callback();
                                        }
                                })
                        });
                }
        });
}

Шаг 4

Добавьте приведенные ниже ссылки на веб-страницы, на которых находится раскрывающийся список.

<link rel="stylesheet" href="https://www.solodev.com/assets/selectize/css/normalize.css">
<link rel="stylesheet" href="https://www.solodev.com/assets/selectize/css/selectize.default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://www.solodev.com/assets/selectize/js/jquery.js"></script>
<script src="https://www.solodev.com/assets/selectize/js/selectize.js"></script>
<script src="https://www.solodev.com/assets/selectize/js/index.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="state.js"></script>

Демо на JSFiddle

Скачать с GitHub

Первоначально опубликовано здесь, в блоге Solodev Web Design

Чтобы узнать больше о возможностях платформы веб-дизайна Solodev, посетите solodev.com/features/!