Billing & Shipping States: Possible to show a simple dropdown box instead of datalist

[tammu]

I am looking to replace the currently displayed options for billing and shipping states. Just want a simple dropdown that lists all the US states as we don't ship internationally. The current datalist format is confusing as it is asking to select or type and our customers are getting confused as they can't select anything.

Can I just replace it the following code:

<mvt:if expr="g.States_Empty">
<li class="c-form-list__item o-layout__item u-width-4--m &mvte:global:ShipState_Row;">
<label class="c-form-label u-text-medium u-color-gray-40 is-required u-font-tiny" for="l-ShipState">State</label>
<input id="l-ShipState" class="c-form-input c-form-input--large" type="text" name="ShipState" value="&mvte:global:ShipState;" &mvt:shipping_required;>
</li>
<mvt:else>
<li class="c-form-list__item o-layout__item u-width-4--m &mvte:global:ShipState_Row;" data-classlist="c-form-select__dropdown c-form-input--large" data-id="ShipStateSelect" data-hook="mvt-select ShipState">
<label class="c-form-label u-text-medium u-color-gray-40 is-required u-font-tiny" for="ShipStateSelect">State/Province</label>
<div class="c-form-select">
<mvt:item name="states" param="ShipStateSelect" />
</div>
</li>
<li class="c-form-list__item o-layout__item u-width-4--m &mvte:global:ShipState_Row;">
<label class="c-form-label u-text-italic u-color-gray-40 u-font-tiny" for="l-ShipState">Other State</label>
<input id="l-ShipState" class="c-form-input c-form-input--large" type="text" name="ShipState" value="&mvte:global:ShipState;">
</li>
</mvt:if>

Same hold true for Billing.

Thanks

[Nick]

Here is my suggestion on what to update (same can be done for billing) for the default Shadows template:

<mvt:if expr="g.States_Empty">
    <div class="c-form-list__item o-layout__item u-width-3--m &mvte:global:ShipState_Row;">
        <label id="ShipState_label" class="c-form-label u-text-medium is-required" for="ShipState">State/Province</label>
        <input id="ShipState" class="c-form-input" type="text" name="ShipState" value="&mvte:global:ShipState;" &mvte:shipping_required; aria-describedby="ShippingInformation ShipState_label" autocomplete="address-level1">
    </div>
<mvt:else>
    <div class="c-form-list__item o-layout__item u-width-3--m &mvte:global:ShipState_Row;">
        <label id="ShipStateSelect_label" class="c-form-label u-text-medium is-required" for="ShipStateSelect">State/Province</label>
        <input name="ShipState" type="hidden" value="&mvte:global:ShipState;">
        <mvt:comment>                      
        <input id="ShipStateSelect" class="c-form-input" data-datalist list="ShipStateDatalist" name="ShipStateSelect" placeholder="Select or Type" type="text" value="&mvte:global:ShipStateSelect;" &mvte:shipping_required; aria-describedby="ShippingInformation ShipStateSelect_label" autocomplete="address-level1">
        <datalist id="ShipStateDatalist">
            <mvt:foreach array="global:StateDatalist" iterator="StateData">
                <option value="&mvte:StateData:code;">&mvte:StateData:name ;</option>
            </mvt:foreach>
        </datalist>
        </mvt:comment>
        <div class="c-form-select">
            <select name="ShipStateSelect" id="ShipStateSelect" class="c-form-select__dropdown" aria-describedby="ShippingInformation ShipState_label" autocomplete="state">
                <option value="">Select State</option>
            <mvt:foreach array="global:StateDatalist" iterator="StateData">
                <option value="&mvte:StateData:code;">&mvte:StateData:name ;</option>
            </mvt:foreach>
            </select>
        </div>
    </div>
</mvt:if>