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

CC BY-SA 3.0
2016-05-03T17:32:02.277Z
Thank you, I will give this a spin. How can we check out the countryId's?
oxford
CC BY-SA 3.0
2016-05-03T17:33:00.663Z
I just used twig's dump var to look at the array prior to hardcoding it. So `{{dump(states)}}`
mcclaskiem
CC BY-SA 3.0
2016-05-03T17:10:25.973Z
2016-05-03T17:10:25.973Z
mcclaskiem
<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>

<plugin-craftcommerce>
How can I create a States drop down?
# 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:

Country

    {% for key, option in countries %}
        {% set optionValue = (model ? model.countryId : '') %}
        {{ option }}
    {% endfor %}

{% if model and model.getErrors('countryId') %}
    {{ model.getErrors('countryId')|join }}
{% endif %}



State
{% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}

    {% for key, option in options %}
        {% set optionValue = (model ? model.stateId : '') %}
        {{ option }}
    {% endfor %}




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

     {% for key, state in states %}
          {{state}}
     {% endfor %}

> **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)}}`  

---

