From 7c42ac0a290b22cf9dfece27e27995bcb65b2508 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Thu, 14 Mar 2019 13:52:36 +0000
Subject: [PATCH] Also remove hardcoding of attributes on frontend state fields

---
 assets/js/frontend/country-select.js | 68 ++++++++++++----------------
 1 file changed, 29 insertions(+), 39 deletions(-)

diff --git a/assets/js/frontend/country-select.js b/assets/js/frontend/country-select.js
index dc0901070ae..259f592c527 100644
--- a/assets/js/frontend/country-select.js
+++ b/assets/js/frontend/country-select.js
@@ -101,27 +101,17 @@ jQuery( function( $ ) {
 
 		if ( states[ country ] ) {
 			if ( $.isEmptyObject( states[ country ] ) ) {
+				var $newstate = $( '<input type="hidden" />' )
+					.prop( 'id', input_id )
+					.prop( 'name', input_name )
+					.prop( 'placeholder', placeholder )
+					.addClass( 'hidden' );
 				$parent.hide().find( '.select2-container' ).remove();
-				$statebox.replaceWith(
-					'<input type="hidden" class="hidden" name="' +
-					input_name +
-					'" id="' +
-					input_id +
-					'" value="" placeholder="' +
-					placeholder +
-					'" />'
-				);
+				$statebox.replaceWith( $newstate );
 				$( document.body ).trigger( 'country_to_state_changed', [ country, $wrapper ] );
 			} else {
-
-				var options = '',
-					state   = states[ country ];
-
-				for ( var index in state ) {
-					if ( state.hasOwnProperty( index ) ) {
-						options = options + '<option value="' + index + '">' + state[ index ] + '</option>';
-					}
-				}
+				var state          = states[ country ],
+					$defaultOption = $( '<option value=""></option>' ).text( wc_country_select_params.i18n_select_state_text );
 
 				if ( ! placeholder ) {
 					placeholder = wc_country_select_params.i18n_select_state_text;
@@ -130,37 +120,37 @@ jQuery( function( $ ) {
 				$parent.show();
 
 				if ( $statebox.is( 'input' ) ) {
-					// Change for select
-					$statebox.replaceWith(
-						'<select name="' +
-						input_name +
-						'" id="' +
-						input_id +
-						'" class="state_select" data-placeholder="' +
-						placeholder +
-						'"></select>'
-					);
+					$newstate = $( '<select></select>' )
+						.prop( 'id', input_id )
+						.prop( 'name', input_name )
+						.data( 'placeholder', placeholder )
+						.addClass( 'state_select' );
+					$statebox.replaceWith( $newstate );
 					$statebox = $wrapper.find( '#billing_state, #shipping_state, #calc_shipping_state' );
 				}
 
-				$statebox.html( '<option value="">' + wc_country_select_params.i18n_select_state_text + '</option>' + options );
+				$statebox.empty().append( $defaultOption );
+
+				$.each( state, function( index ) {
+					var $option = $( '<option></option>' )
+						.prop( 'value', index )
+						.text( state[ index ] );
+					$statebox.append( $option );
+				} );
+
 				$statebox.val( value ).change();
 
 				$( document.body ).trigger( 'country_to_state_changed', [country, $wrapper ] );
 			}
 		} else {
-
 			if ( $statebox.is( 'select, input[type="hidden"]' ) ) {
+				var $newstate = $( '<input type="text" />' )
+					.prop( 'id', input_id )
+					.prop( 'name', input_name )
+					.prop( 'placeholder', placeholder )
+					.addClass( 'input-text' );
 				$parent.show().find( '.select2-container' ).remove();
-				$statebox.replaceWith(
-					'<input type="text" class="input-text" name="' +
-					input_name +
-					'" id="' +
-					input_id +
-					'" placeholder="' +
-					placeholder +
-					'" />'
-				);
+				$statebox.replaceWith( $newstate );
 				$( document.body ).trigger( 'country_to_state_changed', [country, $wrapper ] );
 			}
 		}