Populate drop-down from database in Javascript

Question

(In Javascript) I am doing a GET request inside typefunc() and getting result (variable res) in this format:-

[{"Name":"Button1","ID":"A1"}, {"Name":"Button2","ID":"A2"}, {"Name":"Button3","ID":"A3"}]

How do I populate the below mentioned drop-down using this data?

<select id="type" class="form-control" onchange="typefunc();" required>
    <option selected>Choose...</option>
</select>

score 0 · Answer 1 · answered Jun 10 '22 at 06:08

This is a demo showing how to create option elements to append to the target dropdown based on the options object:

const options = [
  {"Name":"Button1","ID":"A1"},
  {"Name":"Button2","ID":"A2"},
  {"Name":"Button3","ID":"A3"}
];

populateDropdown();

function populateDropdown(){
  const dd = document.getElementById('type');
  for(let option of options){  
    const newOption = document.createElement('option');
    const optionText = document.createTextNode(option.Name);
    newOption.appendChild(optionText);
    newOption.setAttribute('value',option.ID);  
    dd.appendChild(newOption);
  }
}

<select id="type" class="form-control" onchange="typefunc();" required>
    <option selected>Choose...</option>
</select>

Populate drop-down from database in Javascript

1 Answers1