How to add a City Dropdown to WooCommerce Checkout

checkout-1.js

jQuery( function( $ ) {

    var cities            = wc_city_dropdown.cities;
        wrapper_selectors = '.woocommerce-billing-fields,' +
            '.woocommerce-shipping-fields,' +
            '.woocommerce-address-fields';

    $( document.body ).on( 'change refresh', 'select.country_to_state, input.country_to_state', function() {
        var $wrapper = $( this ).closest( wrapper_selectors );

        if ( ! $wrapper.length ) {
            $wrapper = $( this ).closest('.form-row').parent();
        }


        var country     = $( this ).val(),
            $citybox     = $wrapper.find( '#billing_city, #shipping_city' ),
            $parent       = $citybox.closest( '.form-row' ),
            input_name    = $citybox.attr( 'name' ),
            input_id      = $citybox.attr('id'),
            input_classes = $citybox.attr('data-input-classes'),
            value         = $citybox.val(),
            placeholder   = $citybox.attr( 'placeholder' ) || $citybox.attr( 'data-placeholder' ) || '',
            $newcity;

         // next code here
    });

})

checkout-2.js

jQuery( function( $ ) {

    var cities            = wc_city_dropdown.cities;
        wrapper_selectors = '.woocommerce-billing-fields,' +
            '.woocommerce-shipping-fields,' +
            '.woocommerce-address-fields';

    $( document.body ).on( 'change refresh', 'select.country_to_state, input.country_to_state', function() {
        // ... previous code

        // If we have cities for a country, let's create a dropdown
        // In case we have a country defined here, but no cities at all, we'll add a hidden field.
        if ( cities[ country ] ) {
            if ( $.isEmptyObject( cities[ country ] ) ) {
                $newcity = $( '<input type="hidden" />' )
                    .prop( 'id', input_id )
                    .prop( 'name', input_name )
                    .prop( 'placeholder', placeholder )
                    .attr( 'data-input-classes', input_classes )
                    .addClass( 'hidden ' + input_classes );
                $parent.hide().find( '.select2-container' ).remove();
                $citybox.replaceWith( $newcity );
                $( document.body ).trigger( 'country_to_city_changed', [ country, $wrapper ] );
            } else {
                var city = cities[country],
                    $defaultOption = $('<option value=""></option>').text('Select a City');

                if (!placeholder) {
                    placeholder = 'Select a City';
                }

                $parent.show();

                if ($citybox.is('input')) {
                    $newcity = $('<select></select>')
                        .prop('id', input_id)
                        .prop('name', input_name)
                        .data('placeholder', placeholder)
                        .attr('data-input-classes', input_classes)
                        .addClass('state_select ' + input_classes);
                    $citybox.replaceWith($newcity);
                    $citybox = $wrapper.find('#billing_city, #shipping_city');
                }

                $citybox.empty().append($defaultOption);

                $.each(city, function (index) {
                    var $option = $('<option></option>')
                        .prop('value', index)
                        .text(city[index]);
                    $citybox.append($option);
                });

                $citybox.val(value).trigger('change');

                $( document.body ).trigger( 'country_to_city_changed', [country, $wrapper ] );
            }
        } else {
            // No cities found and no country found? Create a regular text input field.
            if ( $citybox.is( 'select, input[type="hidden"]' ) ) {
                $newcity = $( '<input type="text" />' )
                    .prop( 'id', input_id )
                    .prop( 'name', input_name )
                    .prop('placeholder', placeholder)
                    .attr('data-input-classes', input_classes )
                    .addClass( 'input-text  ' + input_classes );
                $parent.show().find( '.select2-container' ).remove();
                $citybox.replaceWith( $newcity );
                $( document.body ).trigger( 'country_to_city_changed', [country, $wrapper ] );
            }
        }

        $( document.body ).trigger( 'country_to_city_changing', [country, $wrapper ] );
    });

})

checkout.js

jQuery( function( $ ) {

    var cities            = wc_city_dropdown.cities;
        wrapper_selectors = '.woocommerce-billing-fields,' +
            '.woocommerce-shipping-fields,' +
            '.woocommerce-address-fields';

    $( document.body ).on( 'change refresh', 'select.country_to_state, input.country_to_state', function() {
        var $wrapper = $( this ).closest( wrapper_selectors );

        if ( ! $wrapper.length ) {
            $wrapper = $( this ).closest('.form-row').parent();
        }


        var country     = $( this ).val(),
            $citybox     = $wrapper.find( '#billing_city, #shipping_city' ),
            $parent       = $citybox.closest( '.form-row' ),
            input_name    = $citybox.attr( 'name' ),
            input_id      = $citybox.attr('id'),
            input_classes = $citybox.attr('data-input-classes'),
            value         = $citybox.val(),
            placeholder   = $citybox.attr( 'placeholder' ) || $citybox.attr( 'data-placeholder' ) || '',
            $newcity;

        if ( cities[ country ] ) {
            if ( $.isEmptyObject( cities[ country ] ) ) {
                $newcity = $( '<input type="hidden" />' )
                    .prop( 'id', input_id )
                    .prop( 'name', input_name )
                    .prop( 'placeholder', placeholder )
                    .attr( 'data-input-classes', input_classes )
                    .addClass( 'hidden ' + input_classes );
                $parent.hide().find( '.select2-container' ).remove();
                $citybox.replaceWith( $newcity );
                $( document.body ).trigger( 'country_to_city_changed', [ country, $wrapper ] );
            } else {
                var city = cities[country],
                    $defaultOption = $('<option value=""></option>').text('Select a City');

                if (!placeholder) {
                    placeholder = 'Select a City';
                }

                $parent.show();

                if ($citybox.is('input')) {
                    $newcity = $('<select></select>')
                        .prop('id', input_id)
                        .prop('name', input_name)
                        .data('placeholder', placeholder)
                        .attr('data-input-classes', input_classes)
                        .addClass('state_select ' + input_classes);
                    $citybox.replaceWith($newcity);
                    $citybox = $wrapper.find('#billing_city, #shipping_city');
                }

                $citybox.empty().append($defaultOption);

                $.each(city, function (index) {
                    var $option = $('<option></option>')
                        .prop('value', index)
                        .text(city[index]);
                    $citybox.append($option);
                });

                $citybox.val(value).trigger('change');

                $( document.body ).trigger( 'country_to_city_changed', [country, $wrapper ] );
            }
        } else {
            if ( $citybox.is( 'select, input[type="hidden"]' ) ) {
                $newcity = $( '<input type="text" />' )
                    .prop( 'id', input_id )
                    .prop( 'name', input_name )
                    .prop('placeholder', placeholder)
                    .attr('data-input-classes', input_classes )
                    .addClass( 'input-text  ' + input_classes );
                $parent.show().find( '.select2-container' ).remove();
                $citybox.replaceWith( $newcity );
                $( document.body ).trigger( 'country_to_city_changed', [country, $wrapper ] );
            }
        }

        $( document.body ).trigger( 'country_to_city_changing', [country, $wrapper ] );
    });

})

enqueue.php

function myplugin_enqueue() {
        if ( ! function_exists( 'is_checkout' ) ) {
            return;
        }

        if ( ! is_checkout() ) {
            return;
        }

        wp_enqueue_script(
            'wc-city-dropdown',
            trailingslashit( plugin_dir_url( __FILE__ ) ) . 'assets/checkout.js',
            [ 'jquery' ],
            filemtime( trailingslashit( plugin_dir_path( __FILE__ ) ) . 'assets/checkout.js' ),
            true
        );

        wp_localize_script( 'wc-city-dropdown', 'wc_city_dropdown', [
           'cities' => myplugin_get_cities()
        ]);
}

get_cities.php

function myplugin_get_cities() {
        $cities = [
            'US' => [
                'New York' => 'New York',
                'Texas' => 'Texas',
            ],
            'IT' => [
                'Rome' => 'Rome',
                'Venezia' => 'Venezia',
            ]
        ];

        return $cities;
}

Hello,
Thank you for this effort, can you put the instruction how to inject these codes?

That thread is a good reminder of how digital tools and shared resources make it easier for people to learn, build, and experiment with new ideas.GTA San Andreas Android version brings the same classic gameplay to mobile devices, so you can enjoy the adventure anytime, anywhere. For players who want extra fun, the GTA San Andreas MOD APK offers enhanced graphics, new vehicles, unlimited resources, and useful gameplay tweaks. Even today, Grand Theft Auto San Andreas remains a milestone in open-world gaming because of its deep story, massive map, and complete player freedom, now fully optimized for smooth touch controls on mobile.That Website In a similar way, interactive games can also spark creativity and curiosity, especially when people explore them alongside other digital experiences.