<script language="javascript">
function getXMLHTTP() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getSubCat(strURL)
{
var req = getXMLHTTP(); // fuction to get xmlhttp object
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4)
{ //data is retrieved from server
if (req.status == 200)
{ // which reprents ok status
document.getElementById('subCatDiv').innerHTML=req.responseText;
}
else
{
alert("There was a problem while using XMLHTTP:\n");
}
}
}
req.open("GET", strURL, true); //open url using get method
req.send(null);
}
}
</script>
<select name="maincat" style="width:200px" onchange="getSubCat('getsubcat.php?catid='+this.value);return false">
<option value="1">Main Cat 1</option>
<option value="2">Main Cat 2</option>
<option value="3">Main Cat 3</option>
</select>
<div id="subCatDiv">
<!-- <select name="subcat" style="width:200px">
<option value="1">Sub Cat 1</option>
<option value="2">Sub Cat 2</option>
<option value="3">Sub Cat 3</option>
</select> -->
</div>when you select maincat drop down js function getSubCat will be called.
getsubcat.php is php page which will return subcat dropdown using passed catid.
e.g. when you run getsubcat.php?catid=1 in browser then in view source
<select name="subcat" style="width:200px">
<option value="1">Sub Cat 1 of main cat 1</option>
<option value="2">Sub Cat 2 of main cat 1</option>
<option value="3">Sub Cat 3 of main cat 1</option>
</select>
using document.getElementById('subCatDiv'), div's inner content is changed each time different value is selected.