JavaScript-将option元素附加到select元素不起作用

Question

I'm trying to append an option element to a select element using JavaScript but I can't get it to work. I broke the code into pieces and called console.log() everywhere I imagined a possible mistake, but everything seems to be working fine, except the appendChild method.

I have also tried with: select.add(new option('value1', 'value2') but it didn't work.

The Javascript Code:

var divTo = document.getElementById('selectProduct');
console.log(divTo);
if (whereTo == 'selectProduct'){
    console.log('inside if loop');
    for (i = 0 ; i < 2 ; i++){
        console.log('inside for loop')
        console.log('products[i] = ' +products[i]);
        var addedOption = new Option();
        addedOption.label = products[i];
        console.log("addedOption label = "+addedOption.label);                  
        divTo.appendChild(addedOption);
        console.log("divTo constructor = "+divTo.constructor.name);
        console.log("addedOptionConstructor = "+addedOption.constructor.name);

 // also tried: divTo.options.add(new Option("valor1", "valor2")); instead of appendChild

 // also tried: addedOption.text instead of addedOption.label


    }           
}

The console logs:

inside if loop
inside for loop
products[i] = Armada Argentina
addedOption label = Armada Argentina
divTo constructor = HTMLSelectElement
addedOptionConstructor = HTMLOptionElement
<select class=​"selectfield" id=​"selectProduct" name=​"product">​</select>​

Could someone help me out?.

PS: I'm really new to programming. I'm sorry if the mistake is evident.

Answer 1

You want to add an option element to a select box dynamically, right?

See this: jsfiddle

Answer 2

Use this,

 var divTo = document.getElementById('selectProduct');
if (whereTo == 'selectProduct') {
    console.log('inside if loop');
    for (i = 0 ; i < 2 ; i++) {
        var addedOption = document.createElement("option");
        addedOption.text = products[i];
        divTo.add(addedOption);
    }
}

Answer 3

createSelect() creates a select and options by passing 2 equal length arrays and a target element to append to.

Signature

createSelect(textArray, valueArray, target)

Parameters

• textArray : An array of strings--each string set to an option's content-- length must be equal to the length of valueArray .
• valueArray : An array of strings--each string set to an option's value-- length must be equal to the length of textArray .
• target : A string--syntax same as CSS and jQuery selector.

SNIPPET 1

 var txt = ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE']; var val = ['1', '2', '3', '4', '5']; function createSelect(textArray, valueArray, target) { var tgt = document.querySelector(target); var sel = document.createElement('select'); var qty = textArray.length; for (let i = 0; i < qty; i++) { var opt = document.createElement('option'); opt.textContent = textArray[i]; opt.value = valueArray[i]; sel.appendChild(opt); } tgt.appendChild(sel); } createSelect(txt, val, "body"); 

For onload , wrap it in another function:

SNIPPET 2

 function init() { var txt = ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE']; var val = [1, 2, 3, 4, 5]; function createSelect(textArray, valueArray, target) { var tgt = document.querySelector(target); var sel = document.createElement('select'); var qty = textArray.length; for (let i = 0; i < qty; i++) { var opt = document.createElement('option'); opt.textContent = textArray[i]; opt.value = valueArray[i]; sel.appendChild(opt); } tgt.appendChild(sel); } createSelect(txt, val, "body"); } window.onload = init;