Download the script and code for populating list box at client side

The main body of the code has two selection boxes and the JavaScript code we kept in an external file for easy understanding. Please read the first part of this tutorial on dynamic drop down list using JavaScript. Please note that the script will not work if the client browser JavaScript is disabled. Read the article oh how to identify and redirect the visitor in these cases. We will be including the external file by using src tag in JavaScript. This is a good practice for SEO angle also. With this we are isolating the code part from the content of the pages.

<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. 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>

See that it has 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 addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");

	optn.text = text;

	optn.value = value;

if(value=="Mango"){

 optn.setAttribute("selected","selected");}

	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.

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

Subscribe to our YouTube Channel here

Script from Double drop down list box in client side Javascript

How to make one option as selected

Subscribe