Trying to create a shortcode that displays taxonomy terms in a dropdown

This fixed my issue, hopefully it can help someone else.

<?php 

add_shortcode('city_dropdown', 'city_taxonomy_dropdown');

function city_taxonomy_dropdown( $atts ) {
    // Attributes
    $atts = shortcode_atts(array(
        'hide_empty'   => '1', // or '0'
        'show_count'   => '0', // or '0'
        'orderby'      => 'name', // or 'order'
        'taxonomy'     => 'city',
    ), $atts, 'city_dropdown');

    ob_start();
?> 
    <select class="<?php echo esc_attr($atts['taxonomy']); ?>" name="<?php echo esc_attr($atts['taxonomy']); ?>">
      <option><?php echo sprintf( __( 'Select a %s', 'woocommerce' ), esc_html($atts['taxonomy']) ); ?> </option>
      <?php
        $terms = get_terms(array(
            'taxonomy' => $atts['taxonomy'],
            'hide_empty' => $atts['hide_empty'],
            'show_count' => $atts['show_count'],
            'orderby' => $atts['orderby']
        ));
        
        if (!empty($terms) && !is_wp_error($terms)) {
            foreach ($terms as $key => $term) {
      ?>
        <option value="<?php echo esc_url(get_term_link($term->term_id, $atts['taxonomy'])); ?>"><?php echo esc_html($term->name); ?></option>
      <?php 
            }
        }
      ?>
    </select>
  
<script type="text/javascript">
    jQuery(function(){
        var select=".<?php echo esc_js($atts["taxonomy']); ?>';
        jQuery(select).on('change', function() {
            var selectedValue = jQuery(this).val();
            console.log("Selected value:", selectedValue); // Debugging line to check if value is correct
            if (selectedValue !== '') {
                location.href = selectedValue;
            }  
        });
    });
</script>
<?php
}
?>