[SOLVED] Why am I getting the drop-down value as `undefined' on console.log?

Why am I getting the drop-down value as `undefined' on console.log?

This is an html snippet of my select tag

<select id="selDataset"></select>

I've added options and their corresponding values with the following script and have verified them to be there using the inspect tool

function addOptions() {
    d3.json(url).then(function(data) {
        data.names.forEach((name, i) => {
            var appendOption = selectDropdown.append("option").text(name).attr('value', i)
        })
        selectDropdown.selectedIndex = 0
    })
}

Now I am trying to get value of drop-down!

console.log(selectDropdown.value)

and I'm getting undefined on console, does anyone know why that might be?

Solution

selectDropdown is a d3.js Selection object, not an HTMLElement. You can get the element with selectDropdown.node(). selectDropdown.node().value is how you get the select element's value.