pratik shukla 0 Newbie Poster

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.