title: Change some checkout fields type using jQuery for a specific state in Woocommerce
body: <p>I am trying to implement some conditional fields on checkout in Woocommerce.</p>
  
  <p>Objective: If user selects a specific state (CO) change the BILLING/SHIPPING CITY and POSTCODE text fields to select fields. Shipping needs to update according to value of POSTCODE.</p>
  
  <p>I am using Jquery to update the CITY and POSTCODE fields when a specific state is selected. This works fine, however shipping is not updated when the fields are changed to select type fields -- selecting a different zip from the select field causes the spinning update graphic on the order review/shipping table but nothing is updated to reflect the selected value. </p>
  
  <p>Shipping updates fine when the POSTCODE field is a standard text field and is changed with keyboard input.</p>
  
  <p>What I am working with currently:</p>
  
  <pre><code>function city_to_dropdown( $fields ) {
  
      ?&gt;
      &lt;script type="text/javascript"&gt;
  
  jQuery('#billing_state').on('change', function() {
  
              if (jQuery("select#billing_state option:checked").val()=='CO') {
  
                jQuery( document ).ready(function() {
  
                jQuery("#billing_city").replaceWith('&lt;select id="billing_city" name="billing_city" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1"&gt;' +
               '&lt;option value="" selected&gt;- Select City -&lt;/option&gt;' +
            '&lt;option value="TEST1"&gt;TEST1&lt;/option&gt;' +
            '&lt;option value="TEST2"&gt;TEST2&lt;/option&gt;' +
            '&lt;option value="TEST3"&gt;TEST3&lt;/option&gt;' +
            '&lt;option value="TEST4"&gt;TEST4&lt;/option&gt;' +
            '&lt;option value="TEST5"&gt;TEST5&lt;/option&gt;' +
          '&lt;/select&gt;');
                              jQuery("#shipping_city").replaceWith('&lt;select id="shipping_city" name="shipping_city" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1" &gt;' +
            '&lt;option value="" selected&gt;- Select City -&lt;/option&gt;' +
                                                                   '&lt;option value="" selected&gt;- Select City -&lt;/option&gt;' +
            '&lt;option value="TEST1"&gt;TEST1&lt;/option&gt;' +
            '&lt;option value="TEST2"&gt;TEST2&lt;/option&gt;' +
            '&lt;option value="TEST3"&gt;TEST3&lt;/option&gt;' +
            '&lt;option value="TEST4"&gt;TEST4&lt;/option&gt;' +
            '&lt;option value="TEST5"&gt;TEST5&lt;/option&gt;' +
          '&lt;/select&gt;');
  
                jQuery("#billing_postcode").replaceWith('&lt;select id="billing_postcode" name="billing_postcode" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1" &gt;' +
            '&lt;option value="" selected&gt;- Select Zip -&lt;/option&gt;' +
                                                        '&lt;option value="96734"&gt;96734&lt;/option&gt;' +
            '&lt;option value="96744"&gt;96744&lt;/option&gt;' +
            '&lt;option value="96795"&gt;96795&lt;/option&gt;' +
            '&lt;option value="96863-MCB"&gt;96863-MCB&lt;/option&gt;' +
  
          '&lt;/select&gt;');
  
                jQuery("#shipping_postcode").replaceWith('&lt;select id="shipping_postcode" name="shipping_postcode" class="hi_select address-field" autocomplete="address-level1" data-placeholder="" tabindex="-1"&gt;' +
            '&lt;option value="" selected&gt;- Select Zip -&lt;/option&gt;' +
                                                         '&lt;option value="96734"&gt;96734&lt;/option&gt;' +
            '&lt;option value="96744"&gt;96744&lt;/option&gt;' +
            '&lt;option value="96795"&gt;96795&lt;/option&gt;' +
            '&lt;option value="96863-MCB"&gt;96863-MCB&lt;/option&gt;' +
  
          '&lt;/select&gt;');
                } ); 
              } else {
  
                jQuery("#billing_city").replaceWith('&lt;input type="text" class="input-text address-field " name="billing_city" id="billing_city" placeholder="" value="" autocomplete="address-level2"&gt;');
                jQuery("#billing_postcode").replaceWith('&lt;input type="text" class="input-text address-field " name="billing_postcode" id="billing_postcode" placeholder="" value="" autocomplete="postal-code"&gt;');            
                jQuery("#shipping_city").replaceWith('&lt;input type="text" class="input-text address-field " name="shipping_city" id="shipping_city" placeholder="" value="" autocomplete="address-level2"&gt;');
                jQuery("#shipping_postcode").replaceWith('&lt;input type="text" class="input-text address-field " name="shipping_postcode" id="shipping_postcode" placeholder="" value="" autocomplete="postal-code"&gt;');
              }
  
          });
  
  
  
  
  
      &lt;/script&gt;       
  
      &lt;?php
  
  
  
  
  }
  add_filter( 'woocommerce_after_checkout_billing_form', 'city_to_dropdown' );
  </code></pre>
  
  <p>Thanks!</p>