How to get the name or id of a select dropdown in a dynamic form

Question

I have a dynamic form with a select dropdown, and I want to know what select was changed, however any time that I add a new form and try to change any select the alert is the same: "origen1"

Here is my js code:

<SCRIPT language="javascript">
    function addRow(divId) {
        count = 0;
        count++;
        var etiquetas = new Array();
        var origenes = new Array();
        var parentDiv = document.getElementById(divId);

        // create a div dynamically
        var eleDiv = document.createElement("div");
        eleDiv.setAttribute("name", "olddiv");
        eleDiv.setAttribute("id", "olddiv");

         // create a label dynamically
        var etiqueta = document.createElement("input");
        etiqueta.setAttribute("name", 'etiqueta' + count);
        etiqueta.setAttribute("value", "etiqueta");
        etiqueta.setAttribute('disabled', true);
        etiquetas.push(etiqueta);

        //create a select dynamically
        var myarray=new Array(3)
        myarray[0] = "Opt1"
        myarray[1] = "Opt2"
        myarray[2] = "Opt3"
        var origen = document.createElement("select");
        origen.setAttribute("name", 'origen' + count);          
        for (i=0; i<3; i++) 
        {
            opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = myarray[i];
            origen.appendChild(opt);
        }          
        origen.onchange = function(){testselect(this);};
        origenes.push(origen);

        // create a delete button dynamically
        var eleBtn = document.createElement("input");
        eleBtn.setAttribute("type", "button");
        eleBtn.setAttribute("value", "delete");
        eleBtn.setAttribute("name", "button");
        eleBtn.setAttribute("id", "button");
        eleBtn.setAttribute("onclick", "deleteRow('button')");

        // append new div to parent div 
        parentDiv.appendChild(eleDiv);

        // append textbox & button to new div 
        eleDiv.appendChild(etiqueta);
        eleDiv.appendChild(origen);
        eleDiv.appendChild(eleBtn); 
    }

    function testselect(seleccion)
    {
        alert(seleccion.name);
    }

    function deleteRow(tableID) {
            var div = document.getElementById('olddiv');
            if (div) {
                div.parentNode.removeChild(div);
            }
    }

</SCRIPT>

And the html:

<form name="objForm" action="test1.php">
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    <div id="dataTable" width="350px">

   </div>
    <input  type="submit" value="Submit"/>
</form>

Answer 1

Try inspecting the drop down using firebug. With that you might be able to get the name and ID of the selected drop down but remember the selected drop down has to be selected using firebug in order to see the ID or name used with it.

Since this is JS and the drop down is not selected properly you might not see the name or id used.

So make sure to it is properly selected