So i am using this code example to get a cascaded drop down menu. But i want to add names of people residing in a city. How do i add that when a city is selected? link to demo- http://www.infotuts.com/demo/cascaded-drop-down-jquery-php/
Entire code- INDEX.PHP
<?php
include("connection.php");
?>
<!DOCTYPE html>
<html>
<head>
<title>Cascaded dropdown with jQuery Ajax and PHP | Easyscript4u.com</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="body">
<div class="mhead"><h2>Cascaded dropdown with jQuery Ajax and PHP | Easyscript4u.com</h2></div>
<div id="dropdowns">
<div id="center" class="cascade">
<?php
$sql = "SELECT * FROM tbl_country ORDER BY country_name";
$query = mysqli_query($con, $sql);
?>
<label>Country:
<select name="country" id = "drop1">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
<option value="<?php echo $rs["id"]; ?>"><?php echo $rs["country_name"]; ?></option>
<?php } ?>
</select>
</label>
</div>
<div class="cascade" id="state"></div>
<div id="city" class="cascade"></div>
</div>
</div>
</div>
<script src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop1").change(function(){
var country_id = $("select#drop1 option:selected").attr('value');
// alert(country_id);
$("#state").html( "" );
$("#city").html( "" );
if (country_id.length > 0 ) {
$.ajax({
type: "POST",
url: "fetch_state.php",
data: "country_id="+country_id,
cache: false,
beforeSend: function () {
$('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#state").html( html );
}
});
}
});
});
</script>
</body>
</html>STATE.PHP
<?php
include("connection.php");
$country_id = trim(mysql_escape_string($_POST["country_id"]));
$sql = "SELECT * FROM tbl_state WHERE country_id = ".$country_id ." ORDER BY state_name";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>State:
<select name="state" id="drop2">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs["id"]; ?>"><?php echo $rs["state_name"]; ?></option>
<?php } ?>
</select>
</label>
<?php
}
?>
<script src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(){
$("select#drop2").change(function(){
var state_id = $("select#drop2 option:selected").attr('value');
// alert(state_id);
if (state_id.length > 0 ) {
$.ajax({
type: "POST",
url: "fetch_city.php",
data: "state_id="+state_id,
cache: false,
beforeSend: function () {
$('#city').html('<img src="loader.gif" alt="" width="24" height="24">');
},
success: function(html) {
$("#city").html( html );
}
});
} else {
$("#city").html( "" );
}
});
});
</script>CITY.php
<?php
include("connection.php");
$state_id = trim(mysql_escape_string($_POST["state_id"]));
$sql = "SELECT * FROM tbl_city WHERE state_id = ".$state_id ." ORDER BY city_name";
$count = mysqli_num_rows( mysqli_query($con, $sql) );
if ($count > 0 ) {
$query = mysqli_query($con, $sql);
?>
<label>City:
<select name="city" name="box">
<option value="">Please Select</option>
<?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC)) { ?>
<option value="<?php echo $rs["id"]; ?>"><?php echo $rs["city_name"]; ?></option>
<?php } ?>
</select>
</label>
<?php
}
?>I think there should be a javascript running which calls on the names of people in a particular city in the database. But i have no idea how to go about. Because i am a total newbie. Thank you
</div>
First of all, your files should be: fetch_state.php (instead of state.php) and fetch_city.php (instead of city.php).
Basically, you will need to the following: 1. create a new table "tbl_person" in your database with at least two fields: city_id and person_name;
create a new file by name "fetch_person.php" by copying your current file "fetch_city.php" and changing: city -> person state -> city
replacing your current "fetch_city.php" by copying your current file "fetch_state.php" and changing: drop2 -> drop3 state -> city country -> state