create `select` element using javascript

Question

I have an html table that I am creating dynamically its populating everything Accept select element I tried all the methods but its not working please have a look.

My complete code for table:-

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

The only thing you would like to focus is:-

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

and the function to create select element :-

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

Currently My Html table looks like this and If you will see Status is not populating select option:-

The Inspect Element shows its created but its invisible:-

var selectList = document.createElement("select"); selectList.id = "mySelect"; myParent.appendChild(selectList); //Create and append the options for (var i = 0; i < array.length; i++) { var option = document.createElement("option"); option.value = array[i]; option.text = array[i]; selectList.appendChild(option); } — Rahul Cv
– Rahul Cv, Commented Aug 7, 2020 at 6:59
Hi Rahul this is confusing can you please post as an answer? — Mask
– Mask, Commented Aug 7, 2020 at 7:02
Yes I posted it as an answer. Let me know whether its working for you ? — Rahul Cv
– Rahul Cv, Commented Aug 7, 2020 at 7:03
@Mask what do you see if you inspect the cell under Status column? — Tun Zarni Kyaw
– Tun Zarni Kyaw, Commented Aug 7, 2020 at 7:41
@Tun I have posted the screenshot of Inspect element please check my question. — Mask
– Mask, Commented Aug 7, 2020 at 8:16

Rahul Cv · Accepted Answer · 2020-08-07 07:00:42Z

3

You Missed adding options

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

answered Aug 7, 2020 at 7:00

Rahul Cv

7255 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

create `select` element using javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related