.selectize-control.default.multi .selectize-input.disabled > div {

border-color: #d8d8d8;

background: #fafafa;

}

.selectize-input.disabled, .selectize-input.disabled * {

cursor: default !important;

}

.selectize-control.single .selectize-input.disabled {

opacity: 0.5;

}

.selectize-control.multi .selectize-input.disabled {

background-color: #fafafa;

}

<!-- ************** Cities Demo ************** -->

<section class="demo">

<div class="header">

City / State Selection

</div>

<div class="sandbox">

<label for="select-cities-state">State:</label>

<select id="select-cities-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>

<label for="select-cities-city" style="margin-top:20px">City:</label>

<select id="select-cities-city" placeholder="Pick a city..."></select>

</div>

<div class="description">

A demonstration showing how to use the API to cascade controls for a classic state / city selector.

<strong>Note:</strong> The API for fetching cities is a little spotty, so if it fails to list cities, that's what's going on (try another state).

</div>

<script class="show">

var xhr;

var select_state, $select_state;

var select_city, $select_city;

$select_state = $('#select-cities-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();

}

})

});

}

});

$select_city = $('#select-cities-city').selectize({

valueField: 'name',

labelField: 'name',

searchField: ['name']

});

select_city = $select_city[0].selectize;

select_state = $select_state[0].selectize;

select_city.disable();

</script>

</section>

$container.insertAfter($input.next());