Как связать два раскрывающихся списка, чтобы повлиять на выбор друг друга?

Question

Я использую Woocommerce для продажи товаров в двух городах (оба в разных штатах) страны. По умолчанию на странице оформления заказа было текстовое поле для города, но оно было слишком общим. Итак, я запускаю этот фрагмент кода, чтобы ограничить его двумя городами с раскрывающимся списком:

/**
 * Snippet 1: For city selection drop-down
 */

add_filter( 'wc_city_select_cities', 'my_cities' );

function my_cities( $cities ) {

    $cities['PK'] = array(
        'PK1' => array(
            'Lahore'
        ),
        'PK2' => array(
            'Karachi'
        )
    );
    return $cities;
}

В раскрывающемся списке выбора штата / округа по умолчанию были указаны все провинции / штаты моей страны, поэтому мне пришлось ограничить его двумя провинциями соответствующих городов с помощью следующего фрагмента кода:

/**
 * Snippet 2: For state selection drop-down
 */

add_filter( 'woocommerce_states', 'custom_woocommerce_states' );

function custom_woocommerce_states( $states ) {

  $states['PK'] = array(
    'PK1' => 'Punjab', 
    'PK2' => 'Sindh'
  );
  return $states;
}

С этим кодом, если пользователь выбирает «Лахор» в городе, он все равно может выбрать «Пенджаб» или «Синд» в раскрывающемся списке «Состояние». Однако, если они выбирают штат, например, если они выбирают Синд, то вариант города будет ограничен городом, который находится в этом штате. Но этот город все равно не будет выбран по умолчанию.

Что я могу сделать, чтобы заставить его функционировать таким образом, чтобы, если пользователь выбирает Лахор, штат Пенджаб выбирался по умолчанию или если пользователь выбирал Синд или Пенджаб, так что Карачи или Лахор выбирался по умолчанию.

Любая помощь будет оценена. Спасибо!