Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Creating a Dynamic State Dropdown

This article will show you how to add a dynamic state dropdown to your forms using selectize.js.

selectize.js by Brian Reavis adds the ease of use and interactivity lacking in most web forms. This article will walk you through adding a dynamic state dropdown to your forms using selectize.js.

Below is the HTML, CSS, and JavaScript required to add a dynamic dropdown to your website forms.

Step 1 - Add the HTML below to where you'd like your dropdown to populate

<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>

Step 2 - Add the CSS below to the main stylesheet of your website

.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;
}

Step 3 - Copy and paste the JavaScript below into a file called 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();
          }
        })
      });
    }
  });
}

Step 4 - Add the includes below to the web pages where your dropdown lives

<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>

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev