Hi Mohsin,
Check below given code for your queries
<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();">
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
Feb 23, 2011
