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

Question

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="http://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;
//get the state selected on the dropdown of states
$state_selected = $_GET['meta_value'];

//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 = 'city_acf_subscriber'
             AND user_id IN (SELECT DISTINCT user_id FROM $wpdb->usermeta WHERE meta_key = 'state_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.