Displaying list of cities according to the selected state. Using the WordPress h

Hello,

I come to ask the community a help of a simple hook on WordPress. I’m trying to display a list of states and cities in two dropdows to select a single option in the a form. The list of cities will be displayed according to the selected state.

But the dropdown of list city is returning the source code of site. I do not know why this is happening, so I ask the help.

Here the code added in the Functions of theme:

<script type="text/javascript" src="https://prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script>

        <select name="state" id="state" onchange="loadCity(this)">

        <option>-- Select the State --</option>

                <?php

global $wpdb;

//get the list of states
$list_of_state = ("SELECT DISTINCT meta_value FROM $wpdb->usermeta WHERE meta_key = 'state_acf_subscriber' ORDER BY meta_value ASC");

$option_of_state = mysql_query($list_of_state);

$total_of_state = mysql_num_rows($option_of_state);

                for($i = 0; $i < $total_of_state; $i++){

                        $state = mysql_fetch_array($option_of_state);

                            if($city[meta_value] != ''){

                                     echo "<option value=\"". $state['meta_value']."\">".$state['meta_value']."</option>";
                             }
                }?>

        </select>

<script type="text/javascript">
function loadCity(meta_value){

	if(meta_value){
		var myAjax = new Ajax.Updater('listCity','listcity.ajax.php',
		{
			method : 'get',
		});
	}
}
</script>

<div id="listCity"><label for="City">City: </label>

      	<select name="city" id="listOfCity">
      		<option value="">Select the City</option>
    	</select>
</div>

Here the another file:

<?php

global $wpdb;

$state_selected = $_GET['meta_value']; //get the state selected on the dropdown of states 

//below, get the list of city according the user's id what's are associated with state selected
$list_of_city = "SELECT meta_value FROM $wpdb->usermeta WHERE meta_key = 'bairro_acf_aluno'
                 AND user_id IN (SELECT DISTINCT user_id FROM $wpdb->usermeta WHERE meta_key = 'city_acf_subscriber' AND meta_value = '".$state_selected."') ORDER BY meta_value";

$option_of_city = mysql_query($list_of_city);

$total_of_city = mysql_num_rows($option_of_city);

for($j = 0; $j < $total_of_city; $j++){

	$city = mysql_fetch_array($option_of_city);

	echo "<option value=\"". $city['meta_value']."\">" . $city['meta_value'] ."</option>";

}

The list of states is correct, the dropdown appears showing all states added by subscribers. I just can not view the list of cities

Each user (subscriber) will select your state and city on your profile, and what I need is to be able to select the state and city to filter a list of users on the frontend.

I appreciate any help.