WooCommerce后台订单实现基于州/省联动的城市下拉框问题

问题背景 #

原本已实现WooCommerce后台新建订单页面的固定城市下拉框，但需要升级为选择州/省后联动显示对应城市列表的功能。现有代码遍历地区数组时，要么仅返回每个州下的第一个城市，要么直接赋值数组导致下拉框显示“Array”字符串。

问题分析 #

地区数组$places的结构为：$places['BD'][州名]对应包含多个城市的数组。原代码的双层foreach循环中，内层循环错误地将州对应的城市数组当作单个城市处理：

• 取$city_name[0]只能拿到该州下第一个城市，遗漏其他城市
• 直接赋值$city_name会将数组传入下拉选项，导致显示“Array”

同时，原代码未实现前端联动逻辑，无法根据州的选择动态更新城市列表。

完整解决方案 #

1. 修正PHP代码 #

调整字段处理逻辑，并将地区数据传递给前端JS：

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()
{
    global $places;
    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);
    // 将地区数据传递给前端JS
    wp_localize_script('place-select-js', 'wcPlaceData', array(
        'places' => $places,
        'selectCityText' => __('Select a city…', 'woocommerce')
    ));
}
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;

    // 仅在新建订单页面生效
    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')
        ),
    );

    // 给州/省字段添加标识类，方便JS监听
    if (isset($fields['state'])) {
        $fields['state']['class'] .= ' js_field-state';
    }

    return $fields;
}

2. 编写前端联动JS（js/place-select.js） #

监听州的选择变化，动态更新城市下拉框：

jQuery(document).ready(function($) {
    // 初始化Select2组件
    $('.js_field-state, .js_field-city').select2();

    // 监听州/省选择事件
    $(document).on('change', '.js_field-state', function() {
        const selectedState = $(this).val();
        const citySelect = $('.js_field-city');
        const places = wcPlaceData.places;
        const selectText = wcPlaceData.selectCityText;

        // 清空城市下拉选项
        citySelect.empty();
        // 添加默认提示选项
        citySelect.append($('<option></option>').val('').text(selectText));

        // 根据选中的州加载对应城市
        if (selectedState && places.BD[selectedState]) {
            $.each(places.BD[selectedState], function(_, cityName) {
                citySelect.append($('<option></option>').val(cityName).text(cityName));
            });
        }

        // 更新Select2组件状态
        citySelect.trigger('change');
    });
});

方案说明 #

• 使用wp_localize_script安全地将PHP端的地区数据传递给前端，避免硬编码
• 初始城市下拉仅保留提示选项，减少不必要的DOM加载
• 通过JS监听州/省字段的变化事件，动态生成对应城市的下拉选项
• 结合Select2组件优化下拉框的交互体验

内容的提问来源于stack exchange，提问作者Mohammad Fathi Rahman