I have two dropdwon box. First box has names of the states. Choosing a state will populate the second dropdown box that contains cities of that selected state. For all states city names are stored in mysql database table. now I am little confussed how to model the table and code the dropdown boxes. I can use PHP, mysql, Javasricpt, Ajax. I am just learning basic php and i have to create a website project. So please i need some help. Thank you

Recommended Answers

All 3 Replies

I recomand you to use JQuery.

I can't give you the entire code but here is some of the logic and just a small example:

  $("#main_menu").click(function(){//after a city tab is clicked
        var city=$(this).text()//get that city name
        $.post({"myfile.php",{city:city},,function(data){//post to your php file where you can process the php
            //the data variable is what the file echos
            //now you have all your information from your php file in the data variable
            alert(data);//you should see your information in an alert box
        }})
    })

If you didn't understood please post you actual code (html+php) so I can take a look

Member Avatar for diafol

There must be hundreds of tuts online for this. You have a few options. My fave two:

  1. Get everything from DB on page load and place into json so when you change the first dropdown, js changes the second, without any hit on either the webserver no the DB server.

  2. Standard Ajax - get a roundtrip to the servers and back without refresh - using jQuery.

Which to use though?
I don't know if there's a massive hard and fast rule, but if your state and city data is reasonably static (not updated every minute), then the json may be OK. Also if the size of the data is not excessively enormous. *I'm not sure at what point the size of js arrays / json starts impacting negatively on the speed of the dropdown refresh.

Having a fallback for those without JS should be coded (vanilla PHP).

Member Avatar for diafol

Dug out and refactored some code - it's not brilliant - it could do with some tidying up, but gives an idea for the json thing:

<?php
//STATES TABLE:     PK state_id (char 2, e.g. AZ, AL, AK), state (varchar 20)
//CITIES TABLE:     PK city_id (int), cityname (varchar 25), state_id (char 2)
//JOIN ON state_id  

//CHANGE to LEFT JOIN if you want all states, regardless of whether they have cities or not     
$r = mysql_query("SELECT s.state_id, s.state, c.city_id, c.cityname FROM states AS s INNER JOIN cities AS c ON s.state_id = c.state_id ORDER BY s.state, c.cityname");

if(mysql_num_rows($r)){
    $state_id="";$state_dd= '';
    while($d = mysql_fetch_assoc($r)){
        if($d['state_id'] != $state_id)$state_dd .= "<option value=\"{$d['state_id']}\">{$d['state']}</option>";
        if($state_id === "")$first_id = $d['state_id'];
        if($d['cityname'] != NULL)$cities[$d['state_id']][] = array('city_id'=>$d['city_id'],'cityname'=>$d['cityname']);
        $state_id = $d['state_id'];     
    }
}
$c = json_encode($cities);
?>
<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<form>
    <label for ="states">State:</label>
    <select id="states" name="states">
        <?php echo $state_dd;?>
    </select>
    <label for ="cities">City:</label>
    <select id="cities" name="cities">
        <option>dhdy</option>
    </select>
</form>

<script>
        var s_cities = <?php echo $c;?>; 
        function getCity(id){
            var ops = '';
            $.each(s_cities[id], function(){
                ops = ops + '<option value="' + this['city_id'] + '">' + this['cityname'] + '</option>';
            });
            $('#cities').html(ops);
        }

        getCity('<?php echo $first_id;?>');

        $('#states').change(function(){
            s_state = $('#states').val();
            getCity(s_state);
        });
    </script>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.