Need help on using Jquery to use ajax with a onchange function.

Need help on using Jquery to use ajax with a onchange function.

Hi, I am trying to make a  drop down menu of country and state and city.

I need to once country makes a onchange event. I want it to grab that country value then use ajax post method to a php file that will populate the html code into the states drop down menu. Then the same goes with the state drop down where once it's onchange event is active that it will use ajax to submit the country and state name to another php file that will then do the query in the database for the city names then return the html code of the options with populated city names.

so far this is what I made so far:

  1. <script type="text/javascript">
    $("#country").change(function() {
    country1 = $("OPTION:selected", this).val();
    $.post("/libs/findState.php", { country:country1 },
    function(html){
    $("#States").html(html);
    }
    });
    $("#States").change(function() {
    state1 = $("OPTION:selected", this).val();
    $.post("/libs.findCtate.php", { country:country1 ,State:state1 },
    function(data){
    $("#City").html(data);
    }
    });
    </script>

    </head>
    <body>
    <img id="mlogo"src="/Artwork/marketlogo.png">
    <img id="menu"src="/Artwork/menubackground.png">
    <div id="form1">
    </div>
    <form name="market" action="/market/open_market_list.php" method="POST">
    <a id="select">Select a Market location:</a>
    <a id="country_text">Select A Country:</a>
    <select name="country" id="country">
    <option value="AF">Afghanistan </option>
    <option value="BR">Brazil</option>
    <option value="CA">Canada</option>
    <option value="CN">China</option>
    <option value="EG">Egypt</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
    <option value="HK">Hong Kong</option>
    <option value="IN">India</option>
    <option value="IR">Iran</option>
    <option value="JP">Japan</option>
    <option value="MK">Macedonia</option>
    <option value="MX">Mexico</option>
    <option value="NL">Netherlands</option>
    <option value="PA">Panama </option>
    <option value="SA">Saudi Arabia </option>
    <option value="UAE">United arab Emirates</option>
    <option value="US">United States</option>
    <option value="GB">United Kingdom</option>
    <option value="VE">Venezuela</option>
    </select>
    <a id="state_text">Select A State/Region:</a>
    <select name="States" id="States">
    <option><b> Select A Country First</b></option>
    </select>
    <a id="City_text">Select A City:</a>
    <select name="City" id="City">
    <option value=""> Select A State First</option>
    </select>






















































I want to replace in the state  drop down menu the Select a Country First text.

I want that to be gone and then load in the state names.

how can I do this?

the code I gave dosen't work at all. I would select the U.S in the countries and nothing happens to state drop down where it's supposed to populate state names.

how can I do this?