Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Creating Dropdown Dynamically - Javascript

I'm trying to develop a JS function that creates a new row each time a new record is added to a database (from a different program that checks periodically). Right now I can get the function to check the db, add the record to the table and display it dynamically. The first column is the user id and the second column is where I'm running into issues. I would like to include a dropdown, but I'm not sure how to add options to it. I have the dropdown in the second column, but there are no options to choose from. Anyone have some suggestions?

function addRow(tableID, user) {

var table = document.getElementById(tableID);

var rowCount = table.rows.length;
var row = table.insertRow(rowCount);

var colCount = table.rows[0].cells.length;

for(var i=0; i<colCount; i++) {
    var opt = document.createElement("option");

     tabbody=document.getElementsByTagName("tbody").item(2);
     cell1 = document.createElement("TD");
     cell2 = document.createElement("TD");
     textnode1=document.createTextNode(user);
     //textnode2=document.createTextNode("morecontent");
     textnode2=document.createElement("select");
     textnode2.setAttribute('id', 'focus');
     textnode2.options.add(opt);
     cell1.appendChild(textnode1);
     cell2.appendChild(textnode2);
     row.appendChild(cell1);
     row.appendChild(cell2);
     tabbody.appendChild(row);

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[0].cells[i].innerHTML;

Here is the HTML that it is sent to:

        <th colspan="2">Pending Alerts</th>
    <tr>
       <th>User</th>
       <th>Action</th>
        </tr>
    <tbody>
    </tbody>
like image 935
mkyong Avatar asked Dec 03 '22 05:12

mkyong


1 Answers

After

textnode2 = document.createElement("select");

you need to do something like

var op = new Option();
op.value = 1;
op.text = "First entry";
textnode2.options.add(op);      

and repeat for your desired entries.

like image 68
Eugen Rieck Avatar answered Dec 21 '22 13:12

Eugen Rieck