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
Nabaneeta 0 Newbie Poster
Boyd_ 0 Newbie Poster
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
diafol
There must be hundreds of tuts online for this. You have a few options. My fave two:
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.
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).
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.