jquery php code to bind state and city from mysql database table

Question

I have a form where in one table row a dropdown state field is there and in another tr another dropdown is there for selecting city, I need that before submitting the form when user selects a state from dropdown list automatically the city dropdown should fetch and display only those city from the selected state.

I don't want to use AJAX but want to do it with jquery. Backend database has two tables one is state with two fields id and state, second is city table having 3 fields id, state and city where state is my foreign key.

How can I do it with jquery any help regarding this will be appreciated since I am a newbie, please help

Answer 1

If you don't want to use ajax you can always preload the full list of states with cities into a javascript object and call it from there.

Example:

<select id="stateDrop">
    <option value="state1">State 1</option>
    <option value="state2">State 2</option>
</select>
<select id="cityDrop"></select>
    <script>
    var cities = {'state1':['city_one', 'city_two', 'city_three'], 'state2':['city_four', 'city_five', 'city_six']};
    $('#stateDrop').on('change', function(){
        var cityList = cities[$(this).val()];
        console.log(cityList);
        var output = '';
        $(cityList).each(function(k, v){
            output += '<option value="'+v+'">'+v+'</option>';
        });
        $('#cityDrop').html(output);
    });
    </script>

Fiddle

Answer 2

If you want to avoid using an ajax call, you will need to build a mapping from state-id's to lists of cities. Then bind a function to the change event of the state select-element, and populate the city select-element with the values.

Assuming State ID 0 has the cities A and B, with city id's 0 and 1:

var map = [[{id:0,name:"A"},{id:1,name:"B"}]]            
$("#states").on("change",function() {
    var cities = map[$(this).val()];
    $("#cities option").remove(); //remove previous options
    $.each(cities, function(i,e) {
        $("#cities").append('<option value="'+e.id+'">'+e.name+'</option>');
    });
});

Example: http://jsfiddle.net/HQLQU/

The php/mysql part for building the JS-map could be something like this (untested!):

$query = "SELECT city_id, city_name, state_id FROM cities";
$result = mysql_query($query); //or preferably use a more modern extension
$cities = array();
foreach (mysql_fetch_assoc($result) as $row) {
    $cities[$row['state_id']][] = array("id"=>$row['city_id'],"name"=>$row['city_name']);
}
echo "var map = " . json_encode($cities);