Dynamically adding a table of drop down lists using JS

Question

I want to create a table of drop down lists dynamically. Here is the procedure: 1) A select box appears with few options in the first cell of first row in a table. 2) When the user clicks on an option, another select box appears in the second cell of the first row. 3) In the third cell, there has to be a button clicking on which will add a new row with the select box as said in 1st point.

<html>
<head>
    <title>Search</title>
    <script type="text/javascript">
        var noRows = 1;
        function func(){
            var t = document.getElementById('searchTable');
            var r = table.insertRow(noRows);
            var col = row.insertCell(0);
            var colNames = document.createElement('select');
            colNames.id = 'colNames0';
            colNames.name = 'colNames' + noRows;
            colNames.onchange = populate;
            colNames.options[0] = new Option('Select','');
            for(var i = 0;i < cols.length;++i){
                colNames.options[i+1] = new Option(cols[i],ids[i]);
            }
            colCell.appendChild(colNames);
        }
        function populate(){
            var sel = document.getElementById("colNames" + noRows);
            var col = sel.options[sel.selectedIndex].id;
            if(col == "int"  || col == "date" || col == "time")
                populateInt();
            else
                populateString();
        }
    </script>
</head>
<body onload="func();">
    <table id="searchTable">
    </table>    
</body>

This is the code I began with. I created the select box dynamically in first cell of first row but unable to get the selected option and create the further select lists.

Nikunj Sardhara · Accepted Answer · 2017-03-10 10:43:15Z

1

I don't see int,date or time assigned as id to any option there and another thing

var col = sel.options[sel.selectedIndex].id;

Instead of this line, you can write like below

var col = sel.options[sel.selectedIndex].getAttribute('id');

edited Mar 10, 2017 at 10:43

answered Jan 20, 2017 at 13:33

Nikunj Sardhara

6481 gold badge5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

KayKay Over a year ago

The array ids' has the id of each element. It can be int, date or time.

KayKay Over a year ago

var sel = document.getElementById('colNames'+noRows); var col = sel.options[sel.selectedIndex].getAttribute('id'); document.write("TEST " + col + " TEST"); I tried printing the value and it prints "TEST null TEST"

KayKay Over a year ago

It worked. Its actually getAttribute('value'). Thank you.

Collectives™ on Stack Overflow

Dynamically adding a table of drop down lists using JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related