Link Dropdown List with HTML+PHP+MySQL - php

Question

I want to know how I can link three dropdown lists together. I want to let user select the country, then select the state and then select the city. Actually I tried multiple methods but What I have done is as bellow:
<div class="row">
<div class="col-sm-4"><div class="form-group">
<label for="countries">Country</label>
<select class="form-control" id="countries">
<?php
$servername = "localhost";
$username = "root";
$password = "123";
$dbname = "countries";
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT * FROM countries";
$result = $conn->query($sql);
//echo "<select id='countries'>";
while ($row = $result->fetch_assoc()) {
echo "<option value='" . $row['name'] . "'>" . $row['name'] . "</option>";
}
//echo "</select>";
$conn->close();?>
</select>
</div></div>
<div class="col-sm-4"><div class="form-group">
<label for="countries">State</label>
<select class="form-control" id="states">
<?php
$servername = "localhost";
$username = "root";
$password = "123";
$dbname = "countries";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
if($_POST['submit'] && $_POST['submit'] != 0)
{
$countries=$_POST['countries'];
}
//echo "Connected successfully";
$sql = "SELECT * FROM regions where country_id = $countries";
$result = $conn->query($sql);
//echo "<select id='states'>";
while ($row = $result->fetch_assoc()) {
echo "<option value='" . $row['name'] . "'>" . $row['name'] . "</option>";
}
//echo "</select>";
$conn->close();?>
</select>
</div></div>
</div>
What I need to do is to make three dropdown lists (2 of them are shown above) to let the users select country first, then the second dropdown shows the states/regions based on user selection and finally select city based on selected state.Please show me the solution to do this.

Answer 1

I had written the code for this sometime last year, what you need is to use ajax, have on change event.
Please not I had written my solution using PDO I know yours requires mysqli, but however I don't have much of a time to re write the whole
thing to mysqli
But I hope you will see the logic on how to do this and hopefully you will be able to convert it to mysqli by yourself with no hustle.
my index file
<script src="jquery.min.js"></script>
<?php require 'db_config.php';?>
<script type="text/javascript">
$('#country').on('change', function() {
var countryID = $(this).val();
if (countryID) {
$.ajax({
type: 'POST',
url: 'locations.php',
data: 'country_id=' + countryID,
success: function(html) {
$('#state').html(html);
$('#city').html('<option value="">Select state first</option>');
}
});
} else {
$('#state').html('<option value="">Select country first</option>');
$('#city').html('<option value="">Select state first</option>');
}
$(this).remove('has-errors');
});
$('#state').on('change', function() {
var stateID = $(this).val();
if (stateID) {
$.ajax({
type: 'POST',
url: 'locations.php',
data: 'state=' + stateID,
success: function(html) {
$('#city').html(html);
}
});
} else {
$('#city').html('<option value="">Select city first</option>');
}
});
</script>
<form method="POST" action="" id="reg_form">
<select name="country" id="country" class="input">
<option value="0">Select country</option>
<?php
$stmt= $dbh->Prepare("SELECT countryID, countryName FROM countries ORDER BY countryName ASC");
$stmt->execute();
$results= $stmt->Fetchall(PDO::FETCH_ASSOC);
if(count($results) > 0){
foreach($results as $row){
echo '<option value="'.$row['countryID'].'">'.$row['countryName'].'</option>';
}
}else{
echo '<option value="">country not available</option>';
}
?>
</select>
<select name="state" id="state" class="input">
<option value="">Select country first</option>
</select>
<select name="city" id="city" class="input">
<option value="">Select state first</option>
</select>
</form>
locations.php
<?php
/**
* Created by PhpStorm.
* User: Masivuye
* Date: 2016/12/19
* Time: 11:27 AM
*/
require 'db_config.php';
if(isset($_POST["country_id"]) && !empty($_POST["country_id"])){
$sql=$dbh->prepare("SELECT DISTINCT states.stateID,states.stateName from states INNER JOIN countries ON states.countryID = ? ");
$sql->bindValue(1,$_POST['country_id']);
$sql->execute();
$results =$sql->fetchall(PDO::FETCH_ASSOC);
if(count($results) > 0){
echo '<option value="0">Select state</option>';
foreach($results as $row){
echo '<option value="'.$row['stateID'].'">'.$row['stateName'].'</option>';
}
}else{
echo '<option value="">state not available</option>';
}
}
if(isset($_POST["state"]) && !empty($_POST["state"])){
$sql=$dbh->prepare("SELECT DISTINCT cities.cityID,cities.cityName,cities.stateID from cities INNER JOIN states ON cities.stateID= ? ");
$sql->bindValue(1,$_POST['state']);
$sql->execute();
$results =$sql->fetchall(PDO::FETCH_ASSOC);
if(count($results) > 0){
echo '<option value="0">Select City</option>';
foreach($results as $row){
echo '<option value="'.$row['cityID'].'">'.$row['cityName'].'</option>';
}
}else{
echo '<option value="">city not available</option>';
}
}
?>
db_config.php
<?php
$servername = "localhost";
$username = "hidden";
$password = "hidden";
$dbname = "mytestDB";
try {
$dbh= new PDO("mysql:host=$servername;dbname=$dbname",$username,$password);
$dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
echo "Could not connect".$e->getMessage();
error_log($e);
}
?>
my tables
CREATE TABLE IF NOT EXISTS `states` (
`stateID` int(6) NOT NULL AUTO_INCREMENT,
`stateName` varchar(255) NOT NULL,
`countryID` int(6) NOT NULL,
PRIMARY KEY (`stateID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `states`
--
INSERT INTO `states` (`stateID`, `stateName`, `countryID`) VALUES
(3, 'Western Cape', 2),
(4, 'Eastern Cape', 1),
(5, 'North West', 2),
(6, 'Northen Cape', 2);
--
-- Table structure for table `cities`
--
CREATE TABLE IF NOT EXISTS `cities` (
`cityID` int(6) NOT NULL AUTO_INCREMENT,
`cityName` varchar(255) NOT NULL,
`stateID` int(6) NOT NULL,
PRIMARY KEY (`cityID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `cities`
--
INSERT INTO `cities` (`cityID`, `cityName`, `stateID`) VALUES
(1, 'Cape Town', 3),
(2, 'East London', 4);
-- --------------------------------------------------------
--
-- Table structure for table `countries`
--
CREATE TABLE IF NOT EXISTS `countries` (
`countryID` int(6) NOT NULL AUTO_INCREMENT,
`countryName` varchar(255) NOT NULL,
PRIMARY KEY (`countryID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ;
--
-- Dumping data for table `countries`
--
INSERT INTO `countries` (`countryID`, `countryName`) VALUES
(1, 'South Africa'),
(2, 'Zambia'),
(3, 'Zimbabwe '),
(4, 'Uganda'),
(5, 'USA'),
(6, 'Brazil'),
(7, 'India'),
(8, 'Austrilia'),
(9, 'Ghana');
-- --------------------------------------------------------
NB: use your own characterset on the tables, you may use utf-8
Hope this will point you to the correct direction, hoping also other SO users will help where I missed something.

Answer 2

You can achieve what you want a multiple ways, but you have to make many improvements on your code.
For eg. you could just make connection on top of your script rather than multiple times (wherever you need). Also you could fetch the data from database tables on top of your script like this.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT * FROM countries";
$result = $conn->query($sql);
$countries = $result->fetch_all(MYSQLI_ASSOC);
$sql = "SELECT * FROM regions";
$result = $conn->query($sql);
$regions = $result->fetch_all(MYSQLI_ASSOC);
?>
Then add your html codes below.
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="countries">Country</label>
<select class="form-control" id="countries" onchange="refreshPage(this)">
<option value=""> Select Country</option>
<?php foreach($countries as $country): ?>
<option value="<?= $country['id'] ?>" ><?= $country['name'] ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="regions">Region</label>
<select class="form-control" id="regions">
<option value=""> Select Region</option>
<?php foreach($regions as $region): ?>
<option value="<?= $region['id'] ?>"><?= $region['name'] ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
You want the countries and regions related, for which you can use javascript or even jQuery (if you want) to fetch regions separately. Or just refresh the page when country is selected, like. (Mind the refreshPage() Method on countries select box above. )
<script>
function refreshPage(object)
{
var country_id = object.options[object.selectedIndex].value;
if (country_id != '') {
window.location.href = '?country_id='+country_id;
}
}
</script>
Now you have to just take the country_id value from $_GET to filter regions. The complete code looks like this.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT * FROM countries";
$result = $conn->query($sql);
$countries = $result->fetch_all(MYSQLI_ASSOC);
$where = "";
if (isset($_GET['country_id']) && $_GET['country_id'] != '') {
$where = " WHERE country_id = '{$_GET['country_id']}'";
}
$sql = "SELECT * FROM regions {$where}";
$result = $conn->query($sql);
$regions = $result->fetch_all(MYSQLI_ASSOC);
?>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="countries">Country</label>
<select class="form-control" id="countries" onchange="refreshPage(this)">
<option value=""> Select Country</option>
<?php foreach($countries as $country): ?>
<option value="<?= $country['id'] ?>" <?php echo isset($_GET['country_id']) && $_GET['country_id'] == $country['id'] ? 'selected' : ''; ?> ><?= $country['name'] ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="regions">Region</label>
<select class="form-control" id="regions">
<option value=""> Select Region</option>
<?php foreach($regions as $region): ?>
<option value="<?= $region['id'] ?>"><?= $region['name'] ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<script>
function refreshPage(object)
{
var country_id = object.options[object.selectedIndex].value;
if (country_id != '') {
window.location.href = '?country_id='+country_id;
}
}
</script>
The main problem with this code is that, it is not preventing any SQL injection and is vulnerable in many ways. You have to use PDO instead of mysqli and use prepared statement to filter the regions.

Answer 3

In this case you should use AJAX. Onchange (select) you can send a xmlhttprequest (JS) to a separate php file, which returns the data you need (for example as JSON), and insert it into your website with JS.
Example:
<script type="text/javascript">
function filtern()
{
region = document.getElementById("feld1").value;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function()
{
if(xhr.readyState==4 && xhr.status==200)
{
filtered_region = JSON.parse(xhr.responseText);
document.getElementById("select1").innerHTML = "";
for(i=0;i<filtered_region.length;i++)
{
document.getElementById("select1").innerHTML += "<option>"+filtered_region[i]+"</option>";
}
}
}
xhr.open("GET","get_your_data.php?region="+region,true);
xhr.send();
}
</script>
<form>
<p>Feld1: <input type="text" name="feld1" id="feld1" onchange="filtern()" /></p>
<select name="select1" id="select1"></select>
</form>
get_your_data.php returns the data you want to display.