Dependent Dropdown list in PHP without Ajax

Dependent Dropdown list in PHP without Ajax

by

In this article, you going to see how one dropdown is depend on other dropdown list in PHP without ajax.

Let’s start with the topic in a detail step by step for Dependent Dropdown list in PHP.

We going to see with the help of example.

In example there is two dropdown one is for country and the another one is for the states of the country.

On Change of Country dropdown, selected country populates other dropdown with it’s state.

For achieving this, used the set of array for country and state.

To use this set of array use function.

Two function are defined one is for country called countryFunction(arr) function.

Another is for state is called stateFunction(arr) function.

Below is function defined for country and state.

function countryFunction(arr) {
  var out = "";
  var i;
  
  for(i = 0; i < arr.length; i++) {
    out += '<option value="' + arr[i].country + '">' + arr[i].country + '</option>' + 
    arr[i].display + '</a><br>';
  }
  document.getElementById("country").innerHTML = out;
}

In the above code you can see how array is passed in the function name called countryFunction() function.

Array of the country is used in for loop to populate country dropdown.

To populate the country dropdownlist used getElementById method which is using in taking the id of HTML tag.

With the use of below code dropdown get populated.

Next is the state function.

function stateFunction(arr) {
  var out = "";
  var i;
  
  for(i = 0; i < arr.length; i++) {
    out += '<option value="' + arr[i].state + '">' + arr[i].state + '</option>' + 
    arr[i].display + '</a><br>';
  }
  document.getElementById("state").innerHTML = out;
}

How to fetch image from database in php

Similarly the code functionality is defined same way as that is defined for the country.

Pass the array of state in the fuction called stateFunction() fucntion.

With the help of the state function script, state dropdownlist is get populated.

Below is the complete code for dependent dropdown.

Using below script you come to understand in depth how one dropdown is get populated.

<!DOCTYPE html>
<html>
<head>
	<title>PHP Dependent Dropdown List</title>
</head>
<style>
	select.country{
		padding:10px;
		color:red;
		margin:100px;
		align:center;
		width:30%;
		border:5px;
	}
	
	select.state{
		padding:10px;
		color:blue;
		margin:100px;
		align:center;
		border:5px;
		width:30%;
	}
	.selectDiv{
		background-color:#0cd1ad;
		width:100%;
		height:300px;
	}
	.tileDiv{
		text-align:center;
		margin:0 20px;
		padding:10px;
		font-weight:bold;
		font-size:28px;
	}
</style>
<body>
<div class="tileDiv">Dependent Dropdown in PHP without Ajax</div>
<div class="selectDiv">
<select class="country" id="country" onchange="updateState();">Country
</select>
<select class="state" id="state" >State
</select>
</div>
<script>
	var myArrayCountry = [
	  {
		"country" : "India"
	  },
	  {
		"country" : "United States"
	  },
	  {
		"country" : "United Kingdom"
	  }
	];

	function updateState() {
		var zone = document.getElementById("country");

		if (zone.value == "India"){

			alert("You clicked India.");
			var myArrayState = [
			  {
				"state" : "Maharashtra"
			  },
			  {
				"state" : "Kerala"
			  }
			];
			stateFunction(myArrayState)
		}
		
		if (zone.value == "United States"){

			alert("You clicked United States.");
			var myArrayState = [
			  {
				"state" : "Washington"
			  },
			  {
				"state" : "New York"
			  }
			];
			stateFunction(myArrayState)
		}
		
		if (zone.value == "United Kingdom"){

			alert("You clicked United Kingdom.");
			var myArrayState = [
			  {
				"state" : "London"
			  },
			  {
				"state" : "Scotland"
			  },
			  {
				"state" : "Wales"
			  }
			];
			stateFunction(myArrayState)
		}
	}
	countryFunction(myArrayCountry);
	function countryFunction(arr) {
	  var out = "";
	  var i;
	  
	  for(i = 0; i < arr.length; i++) {
		out += '<option value="' + arr[i].country + '">' + arr[i].country + '</option>' + 
		arr[i].display + '</a><br>';
	  }
	  document.getElementById("country").innerHTML = out;
	}
	var myArrayState = [
		{
			"state" : "Maharashtra"
		},
		{
			"state" : "Kerala"
		}
	];
	stateFunction(myArrayState);
	function stateFunction(arr) {
	  var out = "";
	  var i;
	  
	  for(i = 0; i < arr.length; i++) {
		out += '<option value="' + arr[i].state + '">' + arr[i].state + '</option>' + 
		arr[i].display + '</a><br>';
	  }
	  document.getElementById("state").innerHTML = out;
	}
</script>
</body>
</html>

OUTPUT :

Dependent Dropdown in PHP
Dependent Dropdown in PHP

Conclusion:

In this tutorial, you learn finally in simple way and in a detail step by step how one dropdown is depend on another dropdown list in PHP.

I hope you liked my this article. If you have any queries or any question regarding this, Feel free to comment on Me.

Leave a Comment