If you wanted to change the another select box value on the change of the first select box, Here is the answer of your question.
I'm writing an article on dependent select box in PHP, MySQL and Ajax. If you change the first drop down value then second drop down options will get change according to first drop down.
Here I'm explaining an example of dependent select box like if you change the country name 'India' then in second select box India's States will be populated and so on.
Click here to download demo code
db.php
1
2
3
4
5
6
|
<?php
$conn = new mysqli('localhost', 'root', '', 'demo');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
|
list.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<?php
require_once('db.php');
$country_result = $conn->query('select * from countries');
?><select name="country" id="countries-list">
<option value="">Select Country</option>
<?php
if ($country_result->num_rows > 0) {
// output data of each row
while($row = $country_result->fetch_assoc()) {
?>
<option value="<?php echo $row["id"]; ?>"><?php echo $row["country_name"]; ?></option>
<?php
}
}
?>
</select>
</br></br></br>
<select name="state" id="states-list">
<option value=''>Select State</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('#countries-list').on('change', function(){
var country_id = this.value;
$.ajax({
type: "POST",
url: "get_states.php",
data:'country_id='+country_id,
success: function(result){
$("#states-list").html(result);
}
});
});
</script>
|
get_states.php
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php
require_once('db.php');
$country_id = mysqli_real_escape_string($_POST['country_id']);
if($country_id!='')
{
$states_result = $conn->query('select * from states where country_id='.$country_id.'');
$options = "<option value=''>Select State</option>";
while($row = $states_result->fetch_assoc()) {
$options .= "<option value='".$row['id']."'>".$row['state']."</option>";
}
echo $options;
}?>
|
hi love ur script
hello dave,
Thanks for your valuable feedbacks.
but will it b possible to have both script on same page with include db on the header connected to both at once instead of introducing a link page for the sub menu script
No
how do i post the value of selected text using post method
Hi , i am trying this code but it is not working.
I am trying to create dependent dropdown where a person can select a particular shop depending on a region like south, north, east, west.
I have created a database where 4 columns are present like id,region_id, region, store name. I have 2 dropdowns one shows the region and another shows store name. Both are called from the database. Region dropdown is showing all regions.but store name is blank.
I am trying to fetch stores by region id. if region_id==' ' then it will call select query where region_id gets a match. I need help if I am doing anything wrong. That's why I am not getting the results.
Code:
dashboard.php
Date
Region
fetch_assoc()){
echo "" . $row['region'] . "";
}
?>
Store Name
Select Store
SerachRegion.php
query('select * from store_details where region_id='.$region_id.'');
$options = "Select store";
while($row = $states_result->fetch_assoc())
{
$options .= "".$row['name']."";
}
echo $options;
}
?>
Ajax Code:
$('#region').on('change', function(){
var region_id = this.value;
$.ajax({
type: "POST",
url: "SearchRegion.php",
data:'region_id='+region_id,
success: function(result){
$("#states-list").html(result);
}
});
});
I have checked DbConnection.php file it is working fine. Just the issue is this:[enter image description here][1]
Store Name dropdown is blank. and i am not getting any errors.
Hello
1) Check that second dropdown id is "states-list".
2) Inspect browser and check in Network that what Ajax response is coming from PHP file when you select the first dropdown.
No I am getting any responses.
Then problem with either Ajax or server side code which gives you options in response.
1) Check the request, Are you sending the region_id.
2) Check your PHP code which is returning the options response.
very helpful
what does $country_id specifies does it tells us the country_id column of database table or it tells us about the new variable declaration???
Ship Country
Ship State
Select State
$('#ship_country').on('change', function(){
var country_id = this.value;
$.ajax({
type: "POST",
url: "states.php",
data:'country_id='+country_id,
success: function(result){
$("#ship_state").html(result);
}
});
});
and my states.php file
<?php
require_once('connect.php');
$country_id = mysqli_real_escape_string($mysqli,$_REQUEST['country_id']);
if($country_id!='')
{
$states_result = $mysqli_query($mysqli,"select * from state where country_id='.$country_id.'");
$options = "Select State";
echo "hi";
while($row = $states_result->fetch_assoc()) {
$options .= "".$row['state_name']."";
}
echo $options;
}?>
help me out plzzzz
not working
not working
Thanks for this. Works Awsome
Thanks for your
Show countries but after select countries states is not show
codding error fix
get_states.php
in line change
$country_id = mysql_real_escape_string($_POST['country_id']); is wrong line to change
$country_id = $_POST['country_id'];
Hi. Thank you so much for this code!
This worked for me but I had to change line 3 in get_states.php to:
$country_id = mysqli_real_escape_string($conn,$_POST['country_id']);
old value:
$country_id = mysql_real_escape_string($_POST['country_id']);
Cheers! 🙂