Populating select box in custom checkout page in WooCommerce

I would like to generate dynamically the options of the second dropdown list, based on the selected <option> from the first dropdown list.

Example of what I need:

If <option> “A” is selected in the 1st dropdown list, The 2nd dropdown list will show dynamically a specific set of options. Like A1, A2, A3, A4 ….
If <option> “B” is selected in the 1st dropdown list, The 2nd dropdown list will show dynamically a different set of options. Like B1, B2, B3, B4 ….
And going on same system …

Solution : Code goes in function.php file of your active child theme (active theme). This is a fully working and tested example.

// Add checkout custom select fields before order notes.(*)
add_action( 'woocommerce_before_order_notes', 'add_checkout_custom_fields', 20, 1 );
function add_checkout_custom_fields( $checkout) {
$domain = 'woocommerce'; // The domain slug

echo '<h2>'.__( 'Populating In Woocommerce Checkout', $domain ).'</h2>';

// First Select field (Populating options one)
woocommerce_form_field( 'populating_one', array(
'type' => 'select',
'label' => __( 'Populating options one' , $domain),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => array(
'' => __( 'Please select a value', $domain ),
'A' => __( 'A', $domain ),
'B' => __( 'B', $domain ),
'C' => __( 'C', $domain ),
),
),
$checkout->get_value( 'populating_one' ) );

// Default option value
$default_option2 = __( 'Please select a value', $domain );

// Dynamic select field options for Javascript/jQuery
$options_0 = array( '' => $default_option2 );
$options_a = array(
'' => $default_option2,
'A1' => __( 'A1', $domain ),
'A2' => __( 'A2', $domain ),
'A3' => __( 'A3', $domain ),
'A4' => __( 'A4', $domain ),
);
$options_b = array(
'' => $default_option2,
'B1' => __( 'B1', $domain ),
'B2' => __( 'B2', $domain ),
'B3' => __( 'B3', $domain ),
'B4' => __( 'B4', $domain ),
);
$options_c = array(
'' => $default_option2,
'C1' => __( 'C1', $domain ),
'C2' => __( 'C2', $domain ),
'C3' => __( 'C3', $domain ),
'C4' => __( 'C4', $domain ),
);

// Second Select field (Populating options two)
woocommerce_form_field( 'populating_two', array(
'type' => 'select',
'label' => __( 'Populating options two', $domain ),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => $options_0,
),
$checkout->get_value( 'populating_two' ) );

$required = esc_attr__( 'required', 'woocommerce' );

// jQuery code
?>
<script>
jQuery(function($){
var op0 = <?php echo json_encode($options_0); ?>,
opa = <?php echo json_encode($options_a); ?>,
opb = <?php echo json_encode($options_b); ?>,
opc = <?php echo json_encode($options_c); ?>,
select1 = 'select[name="populating_one"]',
select2 = 'select[name="populating_two"]';

// Utility function to fill dynamically the select field options
function dynamicSelectOptions( opt ){
var options = '';
$.each( opt, function( key, value ){
options += '<option value="'+key+'">'+value+'</option>';
});
$(select2).html(options);
}

// 1. When dom is loaded we add the select field option for "A" value
// => Disabled (optional) — Uncomment below to enable
// dynamicSelectOptions( opa );

// 2. On live selection event on the first dropdown
$(select1).change(function(){
if( $(this).val() == 'A' )
dynamicSelectOptions( opa );
else if( $(this).val() == 'B' )
dynamicSelectOptions( opb );
else if( $(this).val() == 'C' )
dynamicSelectOptions( opc );
else
dynamicSelectOptions( op0 ); // Reset to default
});
});
</script>
<?php
}

// Check checkout custom fields
add_action( 'woocommerce_checkout_process', 'wps_check_checkout_custom_fields', 20 ) ;
function wps_check_checkout_custom_fields() {
// if custom fields are empty stop checkout process displaying an error notice.
if ( empty($_POST['populating_one']) || empty($_POST['populating_two']) ){
$notice = __( 'Please select a day part under Populating options' );
wc_add_notice( '<strong>' . $notice . '</strong>', 'error' );
}
}

This is another fully working and tested example with Update Meta data, Show On order details and edit order form.

// Add checkout custom select fields before order notes.(*)
add_action( 'woocommerce_before_order_notes', 'add_checkout_custom_fields', 20, 1 );
function add_checkout_custom_fields( $checkout) {
$domain = 'woocommerce'; // The domain slug
echo '<h3>'.__( 'Get zip codes here', $domain ).'</h3>';
// First Select field (Department)
woocommerce_form_field( 'department_list', array(
'type' => 'select',
'label' => __( 'Department' , $domain),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => array(
'' => __( 'Please Select Department', $domain ),
'Boaco' => __( 'Boaco', $domain ),
'Carazo' => __( 'Carazo', $domain ),
'Chinandega' => __( 'Chinandega', $domain ),
'Chontales' => __( 'Chontales', $domain ),
'Esteli' => __( 'Esteli', $domain ),
'Granada' => __( 'Granada', $domain ),
'Jinotega' => __( 'Jinotega', $domain ),
'León' => __( 'León', $domain ),
'Madriz' => __( 'Madriz', $domain ),
'Managua' => __( 'Managua', $domain ),
'Masaya' => __( 'Masaya', $domain ),
'Matagalpa' => __( 'Matagalpa', $domain ),
'Nueva Segovia' => __( 'Nueva Segovia', $domain ),
'Rio San Juan' => __( 'Rio San Juan', $domain ),
'Rivas' => __( 'Rivas', $domain ),
'RAAS' => __( 'RAAS', $domain ),
'RAAN' => __( 'RAAN', $domain ),
),
),
$checkout->get_value( 'department_list' ) );

// Default option value
$default_option2 = __( 'Please select a value', $domain );

// Dynamic select field options for Javascript/jQuery
$options_0 = array( '' => $default_option2 );
$options_boaco = array(
'' => $default_option2,
'Boaco' => __( 'Boaco', $domain ),
'Camoapa' => __( 'Camoapa', $domain ),
'Santa Lucia' => __( 'Santa Lucia', $domain ),
'San José de los Remates' => __( 'San José de los Remates', $domain ),
'San Lorenzo' => __( 'San Lorenzo', $domain ),
'Teustepe' => __( 'Teustepe', $domain ),
);
$options_carazo = array(
'' => $default_option2,
'Jinotepe' => __( 'Jinotepe', $domain ),
'Diriamba' => __( 'Diriamba', $domain ),
'San Marcos' => __( 'San Marcos', $domain ),
'Santa Teresa' => __( 'Santa Teresa', $domain ),
'Dolores' => __( 'Dolores', $domain ),
'La Paz de Carazo' => __( 'La Paz de Carazo', $domain ),
'El Rosario' => __( 'El Rosario', $domain ),
'La Conquista' => __( 'La Conquista', $domain ),
);
$options_chinandega = array(
'' => $default_option2,
'Chinandega' => __( 'Chinandega', $domain ),
'Corinto' => __( 'Corinto', $domain ),
'El Realejo' => __( 'El Realejo', $domain ),
'Posoltega' => __( 'Posoltega', $domain ),
'El Viejo' => __( 'El Viejo', $domain ),
'Puerto Morazán' => __( 'Puerto Morazán', $domain ),
'Somotillo' => __( 'Somotillo', $domain ),
'Villanueva' => __( 'Villanueva', $domain ),
'Santo Tómas del Norte' => __( 'Santo Tómas del Norte', $domain ),
'Cinco Pinos' => __( 'Cinco Pinos', $domain ),
'San Francisco del Norte' => __( 'San Francisco del Norte', $domain ),
'San Pedro del Norte' => __( 'San Pedro del Norte', $domain ),
);
$options_chontales = array(
'' => $default_option2,
'Juigalpa' => __( 'Juigalpa', $domain ),
'Acoyapa' => __( 'Acoyapa', $domain ),
'Santo Tomás' => __( 'Santo Tomás', $domain ),
'Villa Sanino' => __( 'Villa Sanino', $domain ),
'San Pedro de Lóvago' => __( 'San Pedro de Lóvago', $domain ),
'La Libertad' => __( 'La Libertad', $domain ),
'Santo Domingo' => __( 'Santo Domingo', $domain ),
'Comalapa' => __( 'Comalapa', $domain ),
'San Francisco de Cuapa' => __( 'San Francisco de Cuapa', $domain ),
'El Coral' => __( 'El Coral', $domain ),
);
$options_esteli = array(
'' => $default_option2,
'Estelí' => __( 'Estelí', $domain ),
'Pueblo Nuevo' => __( 'Pueblo Nuevo', $domain ),
'Condega' => __( 'Condega', $domain ),
'San Juan de Limay' => __( 'San Juan de Limay', $domain ),
'La Trinidad' => __( 'La Trinidad', $domain ),
'San Nicolás' => __( 'San Nicolás', $domain ),
);
$options_granada = array(
'' => $default_option2,
'Granada' => __( 'Granada', $domain ),
'Nandaime' => __( 'Nandaime', $domain ),
'Diriomo' => __( 'Diriomo', $domain ),
'Diriá' => __( 'Diriá', $domain ),
);
$options_jinotega = array(
'' => $default_option2,
'Jinotega' => __( 'Jinotega', $domain ),
'San Rafael Del Norte' => __( 'San Rafael Del Norte', $domain ),
'San Sebastián de Yalí' => __( 'San Sebastián de Yalí', $domain ),
'La Concordia' => __( 'La Concordia', $domain ),
'San José de Bocay' => __( 'San José de Bocay', $domain ),
'El Cuá' => __( 'El Cuá', $domain ),
'Santa María de Pantasma' => __( 'Santa María de Pantasma', $domain ),
'Wiwilí de Jinotega' => __( 'Wiwilí de Jinotega', $domain ),
);
$options_leon = array(
'' => $default_option2,
'León' => __( 'León', $domain ),
'El Jicaral' => __( 'El Jicaral', $domain ),
'La Paz Centro' => __( 'La Paz Centro', $domain ),
'Santa Rosa del Peñón' => __( 'Santa Rosa del Peñón', $domain ),
'Quezalguaque' => __( 'Quezalguaque', $domain ),
'Nagarote' => __( 'Nagarote', $domain ),
'El Sauce' => __( 'El Sauce', $domain ),
'Achuapa' => __( 'Achuapa', $domain ),
'Telica' => __( 'Telica', $domain ),
'Larreynaga' => __( 'Larreynaga', $domain ),

);
$options_madriz = array(
'' => $default_option2,
'Somoto' => __( 'Somoto', $domain ),
'Telpaneca' => __( 'Telpaneca', $domain ),
'San Juan de Rio Coco' => __( 'San Juan de Rio Coco', $domain ),
'Palacaguina' => __( 'Palacaguina', $domain ),
'Yalaguina' => __( 'Yalaguina', $domain ),
'Totogalpa' => __( 'Totogalpa', $domain ),
'San Lucas' => __( 'San Lucas', $domain ),
'Las Sabanas' => __( 'Las Sabanas', $domain ),
'San José de Cusmapa' => __( 'San José de Cusmapa', $domain ),
);
$options_managua = array(
'' => $default_option2,
'San Rafael Del Sur' => __( 'San Rafael Del Sur', $domain ),
'Tipitapa' => __( 'Tipitapa', $domain ),
'San Francisco Libre' => __( 'San Francisco Libre', $domain ),
'Mateare' => __( 'Mateare', $domain ),
'Ticuantepe' => __( 'Ticuantepe', $domain ),
'Ciudad Sandino' => __( 'Ciudad Sandino', $domain ),
'El Crucero' => __( 'El Crucero', $domain ),
);
$options_masaya = array(
'' => $default_option2,
'Masaya' => __( 'Masaya', $domain ),
'Nindirí' => __( 'Nindirí', $domain ),
'Tisma' => __( 'Tisma', $domain ),
'Catarina' => __( 'Catarina', $domain ),
'San Juan de Oriente' => __( 'San Juan de Oriente', $domain ),
'Niquinohomo' => __( 'Niquinohomo', $domain ),
'Nandasmo' => __( 'Nandasmo', $domain ),
'Masatepe' => __( 'Masatepe', $domain ),
'La Concepción' => __( 'La Concepción', $domain ),
);
$options_matagalpa = array(
'' => $default_option2,
'Matagalpa' => __( 'Matagalpa', $domain ),
'San Ramón' => __( 'San Ramón', $domain ),
'Matiguas' => __( 'Matiguas', $domain ),
'Muy Muy' => __( 'Muy Muy', $domain ),
'Esquipulas' => __( 'Esquipulas', $domain ),
'San Dionisio' => __( 'San Dionisio', $domain ),
'San Isidro' => __( 'San Isidro', $domain ),
'Sébaco' => __( 'Sébaco', $domain ),
'Ciudad Darío' => __( 'Ciudad Darío', $domain ),
'Terrabona' => __( 'Terrabona', $domain ),
'Río Blanco' => __( 'Río Blanco', $domain ),
'El Tuma La Dalia' => __( 'El Tuma La Dalia', $domain ),
'Rancho Grande' => __( 'Rancho Grande', $domain ),
);
$options_nueva_segovia = array(
'' => $default_option2,
'Ocotal' => __( 'Ocotal', $domain ),
'Santa María' => __( 'Santa María', $domain ),
'Macuelizo' => __( 'Macuelizo', $domain ),
'Dipilto' => __( 'Dipilto', $domain ),
'Ciudad Antigua' => __( 'Ciudad Antigua', $domain ),
'Mozonte' => __( 'Mozonte', $domain ),
'San Fernando' => __( 'San Fernando', $domain ),
'El Jícaro' => __( 'El Jícaro', $domain ),
'Jalapa' => __( 'Jalapa', $domain ),
'Murra' => __( 'Murra', $domain ),
'Quilalí' => __( 'Quilalí', $domain ),
'Wiwilí de Nueva Segovia' => __( 'Wiwilí de Nueva Segovia', $domain ),
);
$options_rio_san_juan = array(
'' => $default_option2,
'San Carlos' => __( 'San Carlos', $domain ),
'El Castillo' => __( 'El Castillo', $domain ),
'San Miguelito' => __( 'San Miguelito', $domain ),
'Morrito' => __( 'Morrito', $domain ),
'San Juan de Nicaragua' => __( 'San Juan de Nicaragua', $domain ),
'El Almendro' => __( 'El Almendro', $domain ),
);
$options_rivas = array(
'' => $default_option2,
'Rivas' => __( 'Rivas', $domain ),
'San Jorge' => __( 'San Jorge', $domain ),
'Buenos Aires' => __( 'Buenos Aires', $domain ),
'Potosí' => __( 'Potosí', $domain ),
'Belén' => __( 'Belén', $domain ),
'Tola' => __( 'Tola', $domain ),
'San Juan del Sur' => __( 'San Juan del Sur', $domain ),
'Cárdenas' => __( 'Cárdenas', $domain ),
'Moyogalpa' => __( 'Moyogalpa', $domain ),
'Altagracia' => __( 'Altagracia', $domain ),
);
$options_raas = array(
'' => $default_option2,
'Bluefields' => __( 'Bluefields', $domain ),
'El Rama' => __( 'El Rama', $domain ),
'Muelle de los Bueyes' => __( 'Muelle de los Bueyes', $domain ),
'Cruz del Río Grande' => __( 'Cruz del Río Grande', $domain ),
'Prinzapolka' => __( 'Prinzapolka', $domain ),
'Nueva Guinea' => __( 'Nueva Guinea', $domain ),
'El Tortuguero' => __( 'El Tortuguero', $domain ),
'Kukrahill' => __( 'Kukrahill', $domain ),
'Laguna de Perlas' => __( 'Laguna de Perlas', $domain ),
'Desembocadura de Cruz Río Grande' => __( 'Desembocadura de Cruz Río Grande', $domain ),
'El Ayote' => __( 'El Ayote', $domain ),

);
$options_raan = array(
'' => $default_option2,
'Puerto Cabezas' => __( 'Puerto Cabezas', $domain ),
'Waspam' => __( 'Waspam', $domain ),
'Siuna' => __( 'Siuna', $domain ),
'Bonanza' => __( 'Bonanza', $domain ),
'Rosita' => __( 'Rosita', $domain ),
'Paiwas' => __( 'Paiwas', $domain ),
'Waslala' => __( 'Waslala', $domain ),
'Corn Island' => __( 'Corn Island', $domain ),
);
$options_zip_51000 = array('51000' => __( '51000', $domain ), );
$options_zip_52100 = array('52100' => __( '52100', $domain ), );
$options_zip_52200 = array('52200' => __( '52200', $domain ), );
$options_zip_52500 = array('52500' => __( '52500', $domain ), );
$options_zip_52400 = array('52400' => __( '52400', $domain ), );
$options_zip_52300 = array('52300' => __( '52300', $domain ), );
$options_zip_45000 = array('45000' => __( '45000', $domain ), );
$options_zip_46300 = array('46300' => __( '46300', $domain ), );
$options_zip_46400 = array('46400' => __( '46400', $domain ), );
$options_zip_46600 = array('46600' => __( '46600', $domain ), );
$options_zip_46100 = array('46100' => __( '46100', $domain ), );
$options_zip_46500 = array('46500' => __( '46500', $domain ), );
$options_zip_46200 = array('46200' => __( '46200', $domain ), );
$options_zip_46700 = array('46700' => __( '46700', $domain ), );
$options_zip_25000 = array('25000' => __( '25000', $domain ), );
$options_zip_26400 = array('26400' => __( '26400', $domain ), );
$options_zip_26300 = array('26300' => __( '26300', $domain ), );
$options_zip_26500 = array('26500' => __( '26500', $domain ), );
$options_zip_26200 = array('26200' => __( '26200', $domain ), );
$options_zip_26600 = array('26600' => __( '26600', $domain ), );
$options_zip_26800 = array('26800' => __( '26800', $domain ), );
$options_zip_26700 = array('26700' => __( '26700', $domain ), );
$options_zip_27200 = array('27200' => __( '27200', $domain ), );
$options_zip_26900 = array('26900' => __( '26900', $domain ), );
$options_zip_27300 = array('27300' => __( '27300', $domain ), );

// Step 1 == Copy this line and replace this zip code with your new zip code
//$options_zip_27300 = array('27300' => __( '27300', $domain ), );

// Second Select field (City)
woocommerce_form_field( 'city_list', array(
'type' => 'select',
'label' => __( 'City', $domain ),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => $options_0,
),
$checkout->get_value( 'city_list' ) );

// Second Select field (Zip Code)
woocommerce_form_field( 'zip_code', array(
'type' => 'select',
'label' => __( 'Zip Code', $domain ),
'class' => array( 'form-row-wide' ),
'required' => true,
'options' => $options_0,
),
$checkout->get_value( 'zip_code' ) );

$required = esc_attr__( 'required', 'woocommerce' );

// jQuery code
?>
<script>
jQuery(function($){
var op0 = <?php echo json_encode($options_0); ?>,
opboaco = <?php echo json_encode($options_boaco); ?>,
opcarazo = <?php echo json_encode($options_carazo); ?>,
opchinandega = <?php echo json_encode($options_chinandega); ?>,
opchontales = <?php echo json_encode($options_chontales); ?>,
opesteli = <?php echo json_encode($options_esteli); ?>,
opgranada = <?php echo json_encode($options_granada); ?>,
opjinotega = <?php echo json_encode($options_jinotega); ?>,
opleon = <?php echo json_encode($options_leon); ?>,
opmadriz = <?php echo json_encode($options_madriz); ?>,
opmanagua = <?php echo json_encode($options_managua); ?>,
opmasaya = <?php echo json_encode($options_masaya); ?>,
opmatagalpa = <?php echo json_encode($options_matagalpa); ?>,
opnueva_segovia = <?php echo json_encode($options_nueva_segovia); ?>,
oprio_san_juan = <?php echo json_encode($options_rio_san_juan); ?>,
oprivas = <?php echo json_encode($options_rivas); ?>,
opraas = <?php echo json_encode($options_raas); ?>,
opraan = <?php echo json_encode($options_raan); ?>,
opzip_51000 = <?php echo json_encode($options_zip_51000); ?>,
opzip_52100 = <?php echo json_encode($options_zip_52100); ?>,
opzip_52200 = <?php echo json_encode($options_zip_52200); ?>,
opzip_52500 = <?php echo json_encode($options_zip_52500); ?>,
opzip_52400 = <?php echo json_encode($options_zip_52400); ?>,
opzip_52300 = <?php echo json_encode($options_zip_52300); ?>,
opzip_45000 = <?php echo json_encode($options_zip_45000); ?>,
opzip_45000 = <?php echo json_encode($options_zip_46300); ?>,
opzip_46400 = <?php echo json_encode($options_zip_46400); ?>,
opzip_46600 = <?php echo json_encode($options_zip_46600); ?>,
opzip_46100 = <?php echo json_encode($options_zip_46100); ?>,
opzip_46100 = <?php echo json_encode($options_zip_46500); ?>,
opzip_46200 = <?php echo json_encode($options_zip_46200); ?>,
opzip_46700 = <?php echo json_encode($options_zip_46700); ?>,
opzip_25000 = <?php echo json_encode($options_zip_25000); ?>,
opzip_26400 = <?php echo json_encode($options_zip_26400); ?>,
opzip_26500 = <?php echo json_encode($options_zip_26500); ?>,
opzip_26200 = <?php echo json_encode($options_zip_26200); ?>,
opzip_26600 = <?php echo json_encode($options_zip_26600); ?>,
opzip_26800 = <?php echo json_encode($options_zip_26800); ?>,
opzip_26700 = <?php echo json_encode($options_zip_26700); ?>,
opzip_27100 = <?php echo json_encode($options_zip_27100); ?>,
opzip_27200 = <?php echo json_encode($options_zip_27200); ?>,
opzip_26900 = <?php echo json_encode($options_zip_26900); ?>,
opzip_27300 = <?php echo json_encode($options_zip_27300); ?>,
// Step 2 == Copy this line and replace this zip code with your new zip code
//opzip_27300 = <?php echo json_encode($options_zip_27300); ?>,
select1 = 'select[name="department_list"]',
select2 = 'select[name="city_list"]';
select3 = 'select[name="zip_code"]';

// Utility function to fill dynamically the select field options
function dynamicCityOptions( opt ){
var options = '';
$.each( opt, function( key, value ){
options += '<option value="'+key+'">'+value+'</option>';
});
$(select2).html(options);
}

function dynamicZipCodeOptions( opt ){
var options = '';
$.each( opt, function( key, value ){
options += '<option value="'+key+'">'+value+'</option>';
});
$(select3).html(options);
}

// 1. When dom is loaded we add the select field option for "Boaco" value
// => Disabled (optional) — Uncomment below to enable
// dynamicCityOptions( opa );

// 2. On live selection event on the first dropdown
$(select1).change(function(){
if( $(this).val() == 'Boaco' )
dynamicCityOptions( opboaco );
else if( $(this).val() == 'Carazo' )
dynamicCityOptions( opcarazo );
else if( $(this).val() == 'Chinandega' )
dynamicCityOptions( opchinandega );
else if( $(this).val() == 'Chontales' )
dynamicCityOptions( opchontales );
else if( $(this).val() == 'Esteli' )
dynamicCityOptions( opesteli );
else if( $(this).val() == 'Granada' )
dynamicCityOptions( opgranada );
else if( $(this).val() == 'Jinotega' )
dynamicCityOptions( opjinotega );
else if( $(this).val() == 'León' )
dynamicCityOptions( opleon );
else if( $(this).val() == 'Madriz' )
dynamicCityOptions( opmadriz );
else if( $(this).val() == 'Managua' )
dynamicCityOptions( opmanagua );
else if( $(this).val() == 'Masaya' )
dynamicCityOptions( opmasaya );
else if( $(this).val() == 'Matagalpa' )
dynamicCityOptions( opmatagalpa );
else if( $(this).val() == 'Nueva Segovia' )
dynamicCityOptions( opnueva_segovia );
else if( $(this).val() == 'Rio San Juan' )
dynamicCityOptions( oprio_san_juan );
else if( $(this).val() == 'Rivas' )
dynamicCityOptions( oprivas );
else if( $(this).val() == 'RAAS' )
dynamicCityOptions( opraas );
else if( $(this).val() == 'RAAN' )
dynamicCityOptions( opraan );
else
dynamicCityOptions( op0 ); // Reset to default
});

// 3. On live selection event on the 2nd dropdown
$(select2).change(function(){
if( $(this).val() == 'Boaco' )
dynamicZipCodeOptions( opzip_51000 );
else if( $(this).val() == 'Camoapa' )
dynamicZipCodeOptions( opzip_52100 );
else if( $(this).val() == 'Santa Lucia' )
dynamicZipCodeOptions( opzip_52200 );
else if( $(this).val() == 'San José de los Remates' )
dynamicZipCodeOptions( opzip_52500 );
else if( $(this).val() == 'San Lorenzo' )
dynamicZipCodeOptions( opzip_52400 );
else if( $(this).val() == 'Teustepe' )
dynamicZipCodeOptions( opzip_52300 );
else if( $(this).val() == 'Jinotepe' )
dynamicZipCodeOptions( opzip_45000 );
else if( $(this).val() == 'Diriamba' )
dynamicZipCodeOptions( opzip_46300 );
else if( $(this).val() == 'San Marcos' )
dynamicZipCodeOptions( opzip_46400 );
else if( $(this).val() == 'Santa Teresa' )
dynamicZipCodeOptions( opzip_46600 );
else if( $(this).val() == 'Dolores' )
dynamicZipCodeOptions( opzip_46100 );
else if( $(this).val() == 'La Paz de Carazo' )
dynamicZipCodeOptions( opzip_46500 );
else if( $(this).val() == 'El Rosario' )
dynamicZipCodeOptions( opzip_46200 );
else if( $(this).val() == 'La Conquista' )
dynamicZipCodeOptions( opzip_46700 );
else if( $(this).val() == 'Chinandega' )
dynamicZipCodeOptions( opzip_25000 );
else if( $(this).val() == 'Corinto' )
dynamicZipCodeOptions( opzip_26400 );
else if( $(this).val() == 'El Realejo' )
dynamicZipCodeOptions( opzip_26300 );
else if( $(this).val() == 'Posoltega' )
dynamicZipCodeOptions( opzip_26500 );
else if( $(this).val() == 'El Viejo' )
dynamicZipCodeOptions( opzip_26200 );
else if( $(this).val() == 'Puerto Morazán' )
dynamicZipCodeOptions( opzip_26600 );
else if( $(this).val() == 'Somotillo' )
dynamicZipCodeOptions( opzip_26800 );
else if( $(this).val() == 'Villanueva' )
dynamicZipCodeOptions( opzip_26700 );
else if( $(this).val() == 'Santo Tómas del Norte' )
dynamicZipCodeOptions( opzip_27100 );
else if( $(this).val() == 'Cinco Pinos' )
dynamicZipCodeOptions( opzip_27200 );
else if( $(this).val() == 'San Francisco del Norte' )
dynamicZipCodeOptions( opzip_26900 );
else if( $(this).val() == 'San Pedro del Norte' )
dynamicZipCodeOptions( opzip_27300 );
// Step 3 == Copy this 2 line for each zip code. Replace this city name with your new zip code city name and replace this zip code with your new zip code.

//else if( $(this).val() == 'San Pedro del Norte' )
//dynamicZipCodeOptions( opzip_27300 );

else
dynamicZipCodeOptions( op0 ); // Reset to default
});
});
</script>
<?php
}

// Check checkout custom fields
add_action( 'woocommerce_checkout_process', 'wps_check_checkout_custom_fields', 20 ) ;
function wps_check_checkout_custom_fields() {
// if custom fields are empty stop checkout process displaying an error notice.
if ( empty($_POST['department_list']) || empty($_POST['city_list']) ){
$notice = __( 'Please select Department & City options' );
wc_add_notice( '<strong>' . $notice . '</strong>', 'error' );
}
}

/**

* Update the value given in custom field

*/

add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta');
function custom_checkout_field_update_order_meta($order_id)
{
if (!empty($_POST['department_list'])) {
update_post_meta($order_id, 'Department',sanitize_text_field($_POST['department_list']));
}
if (!empty($_POST['city_list'])) {
update_post_meta($order_id, 'City',sanitize_text_field($_POST['city_list']));
}
if (!empty($_POST['zip_code'])) {
update_post_meta($order_id, 'Zip Code',sanitize_text_field($_POST['zip_code']));
}
}

/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
echo '<p><strong>'.__('Department').':</strong> ' . get_post_meta( $order->id, 'Department', true ) . '</p>';
echo '<p><strong>'.__('City').':</strong> ' . get_post_meta( $order->id, 'City', true ) . '</p>';
echo '<p><strong>'.__('Zip Code').':</strong> ' . get_post_meta( $order->id, 'Zip Code', true ) . '</p>';
}

Related post for Woo Commerce

Populating select box in custom checkout page in WooCommerce