JavaScript dynamic drop down list, selection of second html list based on first value

Based on the selection of the first drop down list box the options of the second drop down list box can be changed dynamically. This is widely used in forms to narrow down the second html listbox based on the first dropdown list selection.
Demo of two linked drop down script

Examples of two dropdown listbox

If you select "USA" as a country in a dropdown list, only U.S. states appear in the next list. Similarly, when choosing a state, the relevant cities appear in a subsequent dropdown. In cases where multiple sets of dropdown lists are used on the same page—such as selecting product sizes for multiple items—client-side JavaScript is essential for a seamless experience. Instead of sending a request to the server each time a selection is made, JavaScript manages the second dropdown based on the first. This improves speed, as the full data set loads once at the start, enhancing user responsiveness.

The demo shows an example with three categories (fruits, games, scripts) and their subcategories, demonstrating efficient data handling with client-side JavaScript.

Script & Download the code

The main body of the code has two selection boxes and the JavaScript code we kept in an external file for easy understanding.

<script language="javascript" src="list.js"></script>

The above code we will place within the head tags so all code will be loaded at the time of page load.
Demo of two linked drop down script
We will populate the first drop down list value on load of the page. For that we have kept one function in the external JavaScript file and we will call this on load of the function. In the body tag of the page we will add the onload function to call the function fillCategory()

<body onload="fillCategory();">

This code will execute the function fillCategory on load of the page and populate the category list box. Check the tutorial on adding options to a list box. The first list box is having a default option of category and others are added from the fillCategory function. You can change the options in fill category to get your list. Here is the code for the first list box

<SELECT  NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT>

The function fillCategory() inside list.js file is here

function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "Fruits", "Fruits", "");
addOption(document.drop_list.Category, "Games", "Games", "");
addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}

See that in the first list box above one onChange event and it calls the JavaScript function SelectSubcat(). This function will be triggered or executed each time a selection is made on the first list box. Now see the function SelectSubcat inside the external javaScript file list.js.

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
}

> You can see this function calls another function removeAllOptions() first to clear all the elements of the second list known as SubCat. Then it uses addOption function to add new options based on the selection of the first drop down box. The selection of the first drop down box can be collected by using object model of JavaScript

document.drop_list.Category.value

How to make one option as selected

If we want to option Mango to be selected once the fruit is selected from first list then we have to add these lines inside adOption() function.

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket");
addOption(document.drop_list.SubCat,"Football", "Football");
addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP");
addOption(document.drop_list.SubCat,"ASP", "ASP");
addOption(document.drop_list.SubCat,"Perl", "Perl");
}

}

Each time the SelectSubCat() is called (that is the first list box is chagned or loaded) it removes all the options of 2nd listbox .

removeAllOptions(document.drop_list.SubCat);

Based on the selection of first list box it adds the matching options by using addOption() .

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}

function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

The present script can be modified further to develop multiple set of drop down boxes as per requirement. Here an introduction is only given on how to develop a client side dynamic drop down list box. You can get server side dynamic population of drop down box in our PHP tutorials.

main.html file showing the dropdown list

<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
</head>

<body  onload="fillCategory();">

<FORM name="drop_list" action="mainck.php" method="POST" >
		
<SELECT  NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT>&nbsp;
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
<input type=submit value=Submit>
</form>

</body>
</html>

list.js file

function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "Fruits", "Fruits", "");
addOption(document.drop_list.Category, "Games", "Games", "");
addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket");
addOption(document.drop_list.SubCat,"Football", "Football");
addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP");
addOption(document.drop_list.SubCat,"ASP", "ASP");
addOption(document.drop_list.SubCat,"Perl", "Perl");
}

}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}

function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

Download the code of the main page with the JavaScript page for this tutorial

Learn how the same drop down list is developed by taking data from Mysql table

Listbox JavaScript validation

Subscribe to our YouTube Channel here

Webbieads	03-08-2010
Great, script, I want to use this but have two forms (exactly the same) on one html page and cannot implement this script for both - do you know how I could do that?

Tom	11-02-2011
The code does not work if allowing user to make multiple selections (i.e. multiple="multiple"). Please add update for this in your tutorial. Thank you!

sardar	19-03-2011
how to integrate ajax with multiple selection with dropdown list.is there any solution for that your help will be appreciated

newbie	31-05-2011
Can you tell me how to encode categorie and subcategorie values to display in utf-8 format?

James	01-06-2011
I need to have multiple instances of the Double drop down list box on my form (I need to use it three time). I have been unable to figure this out, can anyone offer assistance?

andy	05-07-2011
My programming experience is minimal, but I was able to follow this tutorial relatively easily and implement it (dynamic population of second list box...) within a couple of hours, and now IÂ´m very happy - thank you!

vinu	15-03-2012
hai this nice then display the coding all of u used it

debbieh	17-05-2014
I want the results of two dropdown box selections 1) State 2) City to then populate a page of business listings (specific categories)-- let's say they are city, county & federal courthouses... (from there I will link to 'city=Atlanta "Atlanta city courthouse" aref="http*URL"--- for example)... can you help me? How do I get the SUBMIT search button to then populate the page with results? (i.e. courthouses)

mehul	05-07-2014
can you give example of 3 dynamic dropdown menus... m realy stuck in coding and which i found is not working in case of space in any category string.. please help me

smo	05-07-2014
You can keep category name within single quotes. That should work.

Ajay	13-12-2014
nice script

stephen	22-09-2014
I need to be able to use one drop down list to populate three or more fields

Double drop down list box in client side Javascript

Examples of two dropdown listbox

Script & Download the code

How to make one option as selected

main.html file showing the dropdown list

list.js file

Subscribe