使用 javascript 創建 `select` 元素

Question

我有一個 html 表，我正在動態創建它填充所有內容接受 select 元素我嘗試了所有方法，但它不起作用，請看一下。

我的完整表格代碼：-

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 創建 select 元素：-

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 表如下所示，如果您看到狀態未填充 select 選項：-

檢查元素顯示其創建但不可見：-

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);
    }