Answers.Body: <p>I ended up just hardcoding based on the US <code>countryId</code> of <code>233</code>.</p>
  
  <p><code>{% set states = craft.commerce.statesArray["233"] %}</code></p>
  
  <p>Then simplified my template like this:</p>
  
  <pre><code>&lt;select name="{{ 'model' ~ '[stateId]' }}" required&gt;
       {% for key, state in states %}
            &lt;option value="{{key}}"&gt;{{state}}&lt;/option&gt;
       {% endfor %}
  &lt;/select&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-03T17:32:02.277Z
Answers.Text: Thank you, I will give this a spin. How can we check out the countryId's?
Answers.UserDisplayName: oxford
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-03T17:33:00.663Z
Answers.Text: I just used twig's dump var to look at the array prior to hardcoding it. So `{{dump(states)}}`
Answers.UserDisplayName: mcclaskiem
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-03T17:10:25.973Z
Answers.LastActivityDate: 2016-05-03T17:10:25.973Z
Answers.UserDisplayName: mcclaskiem
Body: <p><strong>Working with the Commerce example templates.</strong>
  The example template uses javascript to populate the States which is based on the selected Country. The code for the Country and State select field:</p>
  
  <pre><code>&lt;div class="field plaintext {% if model and model.getErrors('countryId') | length %}has-error{% endif %}"&gt;
  &lt;label for="{{ modelName }}-countryId"&gt;Country&lt;/label&gt;
  &lt;select class="address-country" name="{{ modelName }}[countryId]"&gt;
      {% for key, option in countries %}
          {% set optionValue = (model ? model.countryId : '') %}
          &lt;option value="{{ key }}" {% if key == optionValue %} selected{% endif %}&gt;{{ option }}&lt;/option&gt;
      {% endfor %}
  &lt;/select&gt;
  {% if model and model.getErrors('countryId') %}
      &lt;p class="errors"&gt;{{ model.getErrors('countryId')|join }}&lt;/p&gt;
  {% endif %}
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="field plaintext {% if model and model.getErrors('stateId') | length %}has-error{% endif %}"&gt;
  &lt;label for="{{ modelName }}-state"&gt;State&lt;/label&gt;
  {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
  &lt;select id="{{ modelName }}-stateId" data-modelname="{{ modelName }}" class="address-stateId {% if options|length == 0 or (model and model.stateName) %}hidden{% endif %}" name="{{ modelName }}[stateValue]"&gt;
      {% for key, option in options %}
          {% set optionValue = (model ? model.stateId : '') %}
          &lt;option value="{{ key }}" {% if key == optionValue %}selected{% endif %}&gt;{{ option }}&lt;/option&gt;
      {% endfor %}
  &lt;/select&gt;
  &lt;input type="text" data-modelname="{{ modelName }}" id="{{ modelName }}-stateName" class="address-stateName {% if options|length &gt; 0 or (model and model.stateId) %}hidden{% endif %}" {% if model and model.stateName %}name="{{ modelName }}[stateValue]" value="{{ model.stateName}}"{% endif %}&gt;
  </code></pre>
  
  <p></p>
  
  <p>All I'm looking for is a drop down for US States no other Countries will be used. I like to keep the 'model' in place though.</p>
  
  <p>The javascript:</p>
  
  <pre><code>{% includejs %}
  var states = {{ craft.commerce.statesArray|json_encode|raw }};
  
  $('select.address-country').change(function ()
  {
      // get the value of the selected country.
      var cid = $(this).val();
      var $states = $(this).closest('.addressBox').find('select.address-stateId');
      var $stateName = $(this).closest('.addressBox').find('input.address-stateName');
      $states.find('option').remove();
  
      if (states.hasOwnProperty(cid))
      {
          // We have states for this country, show the states drop down.
          $states.removeClass('hidden');
          $states.attr('name', $states.data('modelname')+'[stateValue]');
  
          // We have states for this country, hide the stateName input.
          $stateName.removeAttr('name');
          $stateName.addClass('hidden');
          $stateName.val('');
  
          // Add all states as options to drop down.
          for (var id in states[cid])
          {
              var state = states[cid][id];
              var $option = $('&lt;option/&gt;');
              $option.attr('value', id).text(state);
              $states.append($option);
          }
  
      }else{
          // hide the states dropdown, since this country has none.
          //$states.addClass('hidden');
          //$states.removeAttr('name');
  
          // show the stateName
          $stateName.removeClass('hidden');
          $stateName.attr('name', $stateName.data('modelname')+'[stateValue]');
      }
  
  });
  
  $('select').addClass('form-control input-sm');{% endincludejs %}
  </code></pre>
  
Tags: <plugin-craftcommerce>
Title: How can I create a States drop down?
ThreadText: # How can I create a States drop down?
  
  (Asked by: username_0 on 2016-05-03)
  
  **Working with the Commerce example templates.**
  The example template uses javascript to populate the States which is based on the selected Country. The code for the Country and State select field:
  
  ```
  <div class="field plaintext {% if model and model.getErrors('countryId') | length %}has-error{% endif %}">
  <label for="{{ modelName }}-countryId">Country</label>
  <select class="address-country" name="{{ modelName }}[countryId]">
      {% for key, option in countries %}
          {% set optionValue = (model ? model.countryId : '') %}
          <option value="{{ key }}" {% if key == optionValue %} selected{% endif %}>{{ option }}</option>
      {% endfor %}
  </select>
  {% if model and model.getErrors('countryId') %}
      <p class="errors">{{ model.getErrors('countryId')|join }}</p>
  {% endif %}
  
  ```
  
  ```
  <div class="field plaintext {% if model and model.getErrors('stateId') | length %}has-error{% endif %}">
  <label for="{{ modelName }}-state">State</label>
  {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
  <select id="{{ modelName }}-stateId" data-modelname="{{ modelName }}" class="address-stateId {% if options|length == 0 or (model and model.stateName) %}hidden{% endif %}" name="{{ modelName }}[stateValue]">
      {% for key, option in options %}
          {% set optionValue = (model ? model.stateId : '') %}
          <option value="{{ key }}" {% if key == optionValue %}selected{% endif %}>{{ option }}</option>
      {% endfor %}
  </select>
  <input type="text" data-modelname="{{ modelName }}" id="{{ modelName }}-stateName" class="address-stateName {% if options|length > 0 or (model and model.stateId) %}hidden{% endif %}" {% if model and model.stateName %}name="{{ modelName }}[stateValue]" value="{{ model.stateName}}"{% endif %}>
  
  ```
  
  All I'm looking for is a drop down for US States no other Countries will be used. I like to keep the 'model' in place though.
  
  The javascript:
  
  ```
  {% includejs %}
  var states = {{ craft.commerce.statesArray|json_encode|raw }};
  
  $('select.address-country').change(function ()
  {
      // get the value of the selected country.
      var cid = $(this).val();
      var $states = $(this).closest('.addressBox').find('select.address-stateId');
      var $stateName = $(this).closest('.addressBox').find('input.address-stateName');
      $states.find('option').remove();
  
      if (states.hasOwnProperty(cid))
      {
          // We have states for this country, show the states drop down.
          $states.removeClass('hidden');
          $states.attr('name', $states.data('modelname')+'[stateValue]');
  
          // We have states for this country, hide the stateName input.
          $stateName.removeAttr('name');
          $stateName.addClass('hidden');
          $stateName.val('');
  
          // Add all states as options to drop down.
          for (var id in states[cid])
          {
              var state = states[cid][id];
              var $option = $('<option/>');
              $option.attr('value', id).text(state);
              $states.append($option);
          }
  
      }else{
          // hide the states dropdown, since this country has none.
          //$states.addClass('hidden');
          //$states.removeAttr('name');
  
          // show the stateName
          $stateName.removeClass('hidden');
          $stateName.attr('name', $stateName.data('modelname')+'[stateValue]');
      }
  
  });
  
  $('select').addClass('form-control input-sm');{% endincludejs %}
  
  ```
  
  **Tags:** plugin-craftcommerce
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2016-05-03. Score: 3 | Accepted answer
  
  I ended up just hardcoding based on the US `countryId` of `233`.
  
  `{% set states = craft.commerce.statesArray["233"] %}`
  
  Then simplified my template like this:
  
  ```
  <select name="{{ 'model' ~ '[stateId]' }}" required>
       {% for key, state in states %}
            <option value="{{key}}">{{state}}</option>
       {% endfor %}
  </select>
  
  ```
  
  > **Comments:**
  > **username_0**: Thank you, I will give this a spin. How can we check out the countryId's?  
  > **username_1**: I just used twig's dump var to look at the array prior to hardcoding it. So `{{dump(states)}}`  
  
  ---
  
  