html - Assign an option element within a select via javascript

Question

I'm taking a list from the database and I need to assign each data within that select.

However, I am unable to assign an option element within the select.

Follow my code.

let inputCategory = document.querySelector("#modal_form_product select[name='category']");
let option = document.createElement("option");
option.innerText = "5555";
option.value = "5555";
inputCategory.innerHTML += option;
console.log(inputCategory)

question from:https://stackoverflow.com/questions/65891385/assign-an-option-element-within-a-select-via-javascript

Answer 1

You created the element, so append it. innerHTML is only for when you have an HTML string.

let inputCategory = document.querySelector("#modal_form_product select[name='category']");
let option = document.createElement("option");
option.innerText = "5555";
option.value = "5555";
inputCategory.appendChild(option);

or

let inputCategory = document.querySelector("#modal_form_product select[name='category']");
inputCategory.innerHTML += `<option value=5555>5555</option>`;

or

let inputCategory = document.querySelector("#modal_form_product select[name='category']");
inputCategory.insertAdjacentHTML('beforeend', `<option value=5555>5555</option>`);