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

&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 %}




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




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 = $('&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 %}
I ended up just hardcoding based on the US countryId of 233.

{% set states = craft.commerce.statesArray["233"] %}

Then simplified my template like this:

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