Creating Dropdown Dynamically - Javascript

2019-01-28 22:52发布

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>

2条回答
地球回转人心会变
2楼-- · 2019-01-28 23:15

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.

查看更多
唯我独甜
3楼-- · 2019-01-28 23:35

I like this method.

var dropdown = document.getElementById("MyDropDownList");
var opt = document.createElement("option"); 
opt.text = 'something';
opt.value = 'somethings value';
dropdown.options.add(opt);
查看更多
登录 后发表回答