Blow is the code which demonstrates populating a dropdown dynamically on selecting a value in another dropdown using java sript
<html>
<head>
<title>POPULATE DROPDOWN USING JAVASCRIPT</title>
<script type="text/javascript">
function populatedropdown(nValue,nList){
//alert(nList);
var Entity =[];
Entity["SOFTWARE"] = ["ORACLE","MICROSOFT","INFOSYS"];
Entity["HARDWARE"] = ["DELL","INTEL","LENOVA","OTHERS"];
nList.options.length = 1;
var curr = Entity[nValue];
for (each in curr)
{
var nOption = document.createElement('option');
nOption.appendChild(document.createTextNode(curr[each]));
nOption.setAttribute("value",curr[each]);
nList.appendChild(nOption);
}
}
</script>
</head>
<body>
<form method="post" name="myform" id="myform" action="#" >
<table width="95%" border="0" cellpadding="0" cellspacing="0" class="TABLEORANGE" >
<tr>
<td width="3" height="30"> </td>
<td width="166" height="30" nowrap> <span class="redd">*</span>Related to ICARE / GHPL</td>
<td align="center" valign="middle">:</td>
<td colspan="5">
<select name='entities' id="entities" onChange="populatedropdown(this.value,this.form['company'])">
<option value="0">Select Your TPA</option>
<option value="SOFTWARE">SOFTWARE</option>
<option value="HARDWARE">HARDWARE</option>
</select>
</td>
</tr>
<tr>
<td width="3" height="30"> </td>
<td width="166" height="30" nowrap> <span class="redd">*</span> Related to corporate</td>
<td align="center" valign="middle">:</td>
<td colspan="5">
<select name="company" id="company" class="">
<option value="0" selected="selected">-Select-</option>
</select>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>POPULATE DROPDOWN USING JAVASCRIPT</title>
<script type="text/javascript">
function populatedropdown(nValue,nList){
//alert(nList);
var Entity =[];
Entity["SOFTWARE"] = ["ORACLE","MICROSOFT","INFOSYS"];
Entity["HARDWARE"] = ["DELL","INTEL","LENOVA","OTHERS"];
nList.options.length = 1;
var curr = Entity[nValue];
for (each in curr)
{
var nOption = document.createElement('option');
nOption.appendChild(document.createTextNode(curr[each]));
nOption.setAttribute("value",curr[each]);
nList.appendChild(nOption);
}
}
</script>
</head>
<body>
<form method="post" name="myform" id="myform" action="#" >
<table width="95%" border="0" cellpadding="0" cellspacing="0" class="TABLEORANGE" >
<tr>
<td width="3" height="30"> </td>
<td width="166" height="30" nowrap> <span class="redd">*</span>Related to ICARE / GHPL</td>
<td align="center" valign="middle">:</td>
<td colspan="5">
<select name='entities' id="entities" onChange="populatedropdown(this.value,this.form['company'])">
<option value="0">Select Your TPA</option>
<option value="SOFTWARE">SOFTWARE</option>
<option value="HARDWARE">HARDWARE</option>
</select>
</td>
</tr>
<tr>
<td width="3" height="30"> </td>
<td width="166" height="30" nowrap> <span class="redd">*</span> Related to corporate</td>
<td align="center" valign="middle">:</td>
<td colspan="5">
<select name="company" id="company" class="">
<option value="0" selected="selected">-Select-</option>
</select>
</td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment