Linking three dropdown list boxes using Ajax PHP & MySQL

Three interlinked dropdown listbox using Ajax & PHP

By using Ajax we can manage the options of the dropdown list box without reloading the page. This way we can provide better user experience than reloading the page each time the user select one drop box.

You must read how options are added to a listbox in JavaScript. You can check how a default option is kept selected while adding options.

Using Jquery with Bootstrap, you can develop three dependant dropdown list by taking data from MySQL database table.

The basic two dropdown list ( ajax ) already explained here. We will further extend this script to make it three linked dropdown listbox.

For our example we will use three list boxes, first one will list country, second one will list state and third one will list city. The student table is extended to add these three fields to identify each record. All listbox options ( data ) taken from a single table. Check the sql dump file in your download zip file to create your table .

By using JQuery we can create three linked dropdown list. This script is easy to understand and easy to modify.
Tutorial with Demo on using Three linked dropdown list - JQuery

First dropdown list: Country

We will read the data from table by using distinct query. This display the record by using a foreach loop. Here we will use records as options.

Select Country<br><select name=country id='s1' onchange=ajaxFunction('s1');>
<option value=''>Select One</option>
<?Php
require "config.php";// connection to database 
$sql="select distinct country from student5 ";
foreach ($dbo->query($sql) as $row) {
echo "<option value=$row[country]>$row[country]</option>";
}
?>
</select>

Here we used sql distinct command to collect unique country name from the records

Second dropdown list : State

By default this will not display any data and after selection of country code from country dropdown list, the same data will be posted back to ajaxdd3ck.php page. The matching state list based on the selection of country will be populated on state drop down list.

for(j=document.myForm.state.options.length-1;j>=0;j--)
{
document.myForm.state.remove(j);
}

var state1=myObject.value.state;
for (i=0;i<myObject.state.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myObject.state[i];
optn.value = myObject.state[i];
document.myForm.state.options.add(optn);
if(optn.value==state1){
document.myForm.state.options[i].selected=true;
}
}

City dropdown list : city

By default this will not have any options and after selection of state the matching city list will be populated.

All the three dropdown lists use onchange trigger to execute JavaScript function ajaxFunction() by passing a parameter. This parameter which gets stored in variable choice is used to prepare the query string. If country dropdown list is selected , then we will not add any selection to state and city variables in query string. ( this can change based on requirement )

ajax-dd3ck.php

This page receives the drop down list box data and does the validation. This validation script part is prepared based on data present in the list. In your case based on your data you may have to change the required validation.

For City list , the data should be alphabets only
For State list the data must alphabets which may contain blank space.
We prepare the list of state by using WHERE clause in SQL if country variable is present.

Similarly while preparing the query for city we check presence of country and state , for this we will use one AND command in SQL.

After collecting all the list box options ( State & City ) we post back to ajax-dd3.php page using Json.

We populate the dropdown list from the Json data by using array. Read adding options to drowdown list using JavaScript.

This article is written by plus2net.com team.

plus2net.com