javascript - 使用 javascript 创建 `select` 元素

Question

我有一个 html 表，我正在动态创建它填充所有内容接受选择元素我尝试了所有方法但它不起作用请看一下。

我的表格完整代码:-

function getreferData(dataArray) {
    let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
    var ray = dataArray.splice(0, 1)
    let table = document.getElementById('thead1');
    var tableHeaderRow = document.createElement("tr");
    table.appendChild(tableHeaderRow);
    for (i = 0; i < ray[0].length; i++) {
        var tableHeader = document.createElement("th");
        tableHeaderRow.appendChild(tableHeader);
        tableHeader.innerHTML = ray[0][i];
    }


    let tbody = document.getElementById('perf');
    for (var i = 0; i < dataArray.length; i++) {
        let row = document.createElement("tr")
        for (var j = 0; j < dataArray[i].length; j++) {
            if (j == 4) {
                let col = document.createElement("td")
                var a = document.createElement("a");
                a.setAttribute("class", "light-blue-text text-light-blue")
                a.href = dataArray[i][j];
                var node = document.createTextNode("Click here")
                a.appendChild(node)
                col.appendChild(a)
                row.appendChild(col)
            } else if (j == 6) {
                var col = document.createElement("td");
                col.appendChild(createDropdown("status-" + dataArray[i]));
                var lbl = document.createElement("label");
                lbl.setAttribute("for", "status-" + dataArray[i]);
                col.appendChild(lbl)
                row.appendChild(col)
            } else if (j == 7) {
                let col = document.createElement("td")
                var a2 = document.createElement("a");
                a2.setAttribute("class", "btn blue-grey darken-3 waves-effect waves-light");
                a2.setAttribute("onclick", "editrefrecord(\"" + dataArray[i] + "\")");
                a2.setAttribute("style", "color: white");
                var node2 = document.createTextNode("UPDATE");
                a2.appendChild(node2);
                col.appendChild(a2);
                row.appendChild(col)
            } else {
                let col = document.createElement("td")
                col.innerText = dataArray[i][j]
                row.appendChild(col)
            }
        }
        tbody.appendChild(row);
    }

    function createDropdown(id) {
        //create a radio button

        var fragment = document.createDocumentFragment();
        var select = document.createElement('select');
        select.setAttribute("id", id);
        selectArray.forEach(function (r) {
            select.options.add(new Option(r, r));
        });
        fragment.appendChild(select);
        return fragment;
    }
}

你唯一想关注的是:-

let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];

else if (j == 6) {
    var col = document.createElement("td");
    col.appendChild(createDropdown("status-" + dataArray[i]));
    var lbl = document.createElement("label");
    lbl.setAttribute("for", "status-" + dataArray[i]);
    col.appendChild(lbl)
    row.appendChild(col)
}

和创建选择元素的函数:-

function createDropdown(id) {
    //create a radio button

    var fragment = document.createDocumentFragment();
    var select = document.createElement('select');
    select.setAttribute("id", id);
    selectArray.forEach(function (r) {
        select.options.add(new Option(r, r));
    });
    fragment.appendChild(select);
    return fragment;
}

目前我的 Html 表格看起来像这样，如果您将看到 Status is not populating 选择选项:-

Inspect 元素显示其已创建但不可见:-

Answer 1

你错过了添加选项

let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
    
    var selectList = document.createElement("select");
    selectList.id = "mySelect";
    myParent.appendChild(selectList);
    
    //Create and append the options
    for (var i = 0; i < selectArray.length; i++) {
        var option = document.createElement("option");
        option.value = selectArray[i];
        option.text = selectArray[i];
        selectList.appendChild(option);
    }