Wordpress/Woocommerce Admin Order City dropdown based on state - php

Question

I am trying to add a city dropdown in my Woocommerce store's admin order edit area. I have tried this code.
add_filter( 'woocommerce_admin_billing_fields' , 'admin_billing_city_select_field' );
function admin_billing_city_select_field( $fields ) {
global $pagenow;
// Only for new order creation
if( $pagenow != 'post-new.php' ) return $fields;
$fields['city'] = array(
'label' => __( 'City', 'woocommerce' ),
'show' => false,
'class' => 'js_field-city select short',
'type' => 'select',
'options' => array(
'' => __( 'Select a city…', 'woocommerce' ),
'Los Angeles' => __( 'Los Angeles', 'woocommerce' ),
'San Antonio' => __( 'San Antonio', 'woocommerce' ),
),
);
return $fields;
}
It's working like this
But I want to add some condition If the state matches then it will show a specific city list. And it should revel the city list after selecting the state. How can I do this?
Edit 1
I have added places as an array. And here is the full code in Github.
global $places;
$places['BD'] = array(
'dhaka' => array(
__('Aam Bagan', 'woocommerce'),
__('12 Tala', 'woocommerce'),
__('Keraniganj Upazila Sadar', 'woocommerce'),
),
'faridpur' => array(
__('Alfadanga', 'woocommerce'),
),
'gazipur' => array(
__('Gazipur Sadar', 'woocommerce'),
__('Kaliakair', 'woocommerce'),
),
'gopalganj' => array(
__('Gopalganj Sadar', 'woocommerce'),
__('Kashiani', 'woocommerce'),
),
'jamalpur' => array(
__('Bakshiganj', 'woocommerce'),
__('Dewanganj', 'woocommerce'),
),
);
function enqueue_scripts()
{
wp_enqueue_script('jquery');
wp_enqueue_script('select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', array('jquery'), '4.0.13', true);
wp_enqueue_script('place-select-js', plugin_dir_url(__FILE__) . 'js/place-select.js', array('jquery', 'select2'), '0.1', true);
}
add_action('admin_enqueue_scripts', 'enqueue_scripts');
add_filter('woocommerce_admin_billing_fields', 'admin_billing_city_select_field');
function admin_billing_city_select_field($fields)
{
global $pagenow, $places;
// Only for new order creation
if ($pagenow != 'post-new.php') return $fields;
$options = array('' => __('Select a city…', 'woocommerce'));
if (isset($places)) {
foreach ($places as $state => $cities) {
foreach ($cities as $city => $city_name) {
$options[$city] = $city_name[0];
}
}
}
$fields['city'] = array(
'label' => __('City', 'woocommerce'),
'show' => false,
'class' => 'js_field-city select short',
'type' => 'select',
'options' => $options,
);
return $fields;
}
The imported jquery file is from #Aurelien - AK Digital's answer. But it's returning only the first item of the array.
If I change $options[$city] = $city_name[0]; to $options[$city] = $city_name; it's returning a string text instead of cities "Array" How can I fix it?

Answer 1

First, for a better user experience, I recommend to move the "State field" before the "City" & "Postcode" fields.
You also may have to think about the amount of data you'll want to load. Will you propose every single US city and town or only a few ? This will conditionned the way data will be load.
But let's assume you will create you're own [short] list.
(All of this code has been tested WP 6.1.1 & WC 7.3.0)
First you need to store that list of cities, including state prefixes, in a WordPress option (ex.: '_wc_cities_by_states') like so :
$state_city_options = array(
'CA-los-angeles' => __( 'Los Angeles', 'woocommerce' ),
'CA-san-antonio' => __( 'San Antonio', 'woocommerce' ),
'WA-seattle' => __( 'Seattle', 'woocommerce' ),
'WA-olympia' => __( 'Olympia', 'woocommerce' ),
);
set_option('_wc_cities_by_states', $state_city_options);
Then, get this custom option to build your city select option list :
add_filter( 'woocommerce_admin_billing_fields' , 'admin_billing_city_select_field' );
function admin_billing_city_select_field( $fields ) {
global $pagenow;
// Get the array of cities by state from WP option
$cities_by_states = get_option('_wc_cities_by_states', )
// Only for new order creation
if( $pagenow != 'post-new.php' || !$cities_by_states ) return $fields;
// Add it to WC city fields
$fields['city'] = array(
'label' => __( 'City', 'woocommerce' ),
'show' => false,
'class' => 'js_field-city select short',
'type' => 'select',
'options' => $cities_by_states;
);
return $fields;
}
Finally, this is the Javascript (jQuery) that will do the trick (NB: Woocommerce use the select2 lib) :
jQuery(document).ready(function ($) {
$(".js_field-city option").hide();
//Required to biding after billing-edit click
$(".edit_address").one("click", function () {
filterCities();
});
//Required to avoid unbiding after Country change
$(".js_field-country").on("select2:select", function (evt) {
filterCities();
});
filterCities = () => {
$(".js_field-state").on("select2:select", function (evt) {
var state = $(this).select2("data")[0].id;
$(".js_field-city option").hide();
$(".js_field-city option[value^='" + state + "']").show();
$(".js_field-city").val(null);
});
};
});
That code works for me, I hope it will work for you as well.
Thanks to let me know !