woocommerce show cities state as dropdown list

I achieved something similar using the woocommerce_default_address_fields filter

You can do something in the lines of this to create your new cities:

// UPDATE CHECKOUT CITY FIELD
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

// Our hooked in function - $address_fields is passed via the filter!
function custom_override_default_address_fields( $address_fields ) {

    // Billing City
    $address_fields['city']['type'] = 'select';
    $address_fields['city']['label'] = 'Suburb';

    $address_fields['city']['options'] = array(
        '' => '',
        'bo_kaap' => 'Bo-Kaap',
        'devils_peak_estate' => 'Devil\'s Peak Estate',
        'de_waterkant' => 'De Waterkant',
        'foreshore' => 'Foreshore'
    );

    // Sort
    ksort($address_fields['city']['options']);

    // to be added last and not sorted
    $address_fields['city']['options']['other'] = 'Other';

    return $address_fields;
}

Then using javascript to detect when your state is selected, and reveal the cities dropdown that you just created. I hope this is what you were looking for, thought I would share