<script>
function populateValuesInSecondDropDown() {
var obj = document.getElementById('dropDownList1');
var val = obj.options[obj.selectedIndex].value;
// Ajax Call Here. Java Class method to be called for getting // response 'getListForDropDown'
// and 'showDropDownList' is the javascript call back method // which will be called automatically after response came back
var req = AJAXHttpRequest();
req.onreadystatechange = getReadyStateHandler(req, showDropDownList);
var timeStamp = new Date();
var url = 'getListForDropDown?param='+val;
req.open("get", url, true);
req.send(null);
}
function showDropDownList(response) {
// Display here all values(value will be in response) in drop //down
}
</script>
<select name="dropDownList1" onchange="populateValuesInSecondDropDown()">
<option>Select Something</option>
<option>op1</option>
<option>op2</option>
<option>op3</option>
</select>
In this code, on change of value in first drop down, it automatically changes value in the second drop down.
Open in new window