i am trying to insert values in my dropdown list dynamically onclick of add button such that one row should be added with new dropdown with data. i have tried many logic but didnt work.
<html>
<head>
<script language="javascript">
function addrow(tableID)
{
var table = document.getElementById(tableID);
var rowcount = table.rows.length;
var row = table.insertRow(rowcount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowcount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("select");
element2.name = "Function[1]";
//element2 = init();
cell3.appendChild(element2);
document.CountrySelect.Function[1].options[0] = new Option("Please select a Country Type", "-1");
var cell4 = row.insertCell(3);
var element3 = document.createElement("select");
element3.name = "StateType[]";
//element3=init();
cell4.appendChild(element3);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowcount = table.rows.length;
for(var i=0; i<rowcount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(chkbox != null && chkbox.checked == true) {
table.deleteRow(i);
rowcount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
var Country = null;
function init()
{
var numCountry = 2;
var oStateSlct = document.CountrySelect.Function;
Country = new Array(numCountry + 1);
oStateSlct.options[0] = new Option("Please select a Country Type", "-1");
Country[0] = new Array(0);
oStateSlct.options[1] = new Option("Country1", "1");
Country[1] = new Array(1);
Country[1][0] = new Option("State1", "-1");
oStateSlct.options[2] = new Option("Country2", "2");
Country[2] = new Array(2);
Country[2][0] = new Option("State1", "-1");
Country[2][1] = new Option("State2", "0");
}
function fillUpSelectControl(srcCntrl,targetCntrl,selectOptions)
{
var slctIndx = srcCntrl.options.selectedIndex;
for( i=0; i<targetCntrl.options.length; i++ )
targetCntrl.options[i] = null;
var newOptions = selectOptions[slctIndx];
for( i=0; i<newOptions.length; i++ )
targetCntrl.options[i] = new Option( newOptions[i].text, newOptions[i].value );
targetCntrl.options[0].selected = true;
}
</script>
</head>
<body onload="init();">
<form name="CountrySelect" >
<input type="button" value="Add Me" onclick="addrow('mytable');init();"/>
<input type="button" value="Delete me" onClick="deleteRow('mytable')"/>
<table id="mytable" width="350px" border="1">
<tr>
<td><input type="checkbox" name="chkbox"/></td>
<td> 1 </td>
<td><select NAME="Function" onChange="fillUpSelectControl(this,this.form.StateType,Country)">
</select></td>
<td><select name="StateType"> </select></td>
</tr>
</table>
</form>
</body>
</html>