Add option to select element using javascript or jquery doesn’t work

I have a select dropdown box with one option entered. I want to add additional options to the list using javascript or jquery. I have tried multiple ways but nothing works. Here is the html:

   <form class="form-all">
       <label for="selectStrategy" class="form-all" onChange="selectStrategy(this.value);">Select Strategy:</label><br>
       <select id="selectStrategy" width="400px" name="selectStrategy" margin-left="80px">
           <option value="new">New Strategy</option>
       </select><br><br>
    ...

Here is the javascript: Attempt #1

function loadStrategies(callback) {
    $.getJSON("http://localhost:8080/api/v1/strategies", function(data) {
        data.forEach(function (item) {
            console.log(item.name);
            var select = document.getElementById("selectStrategy");
            var option = document.createElement('option');                
            option.value = item.name;
            option.text= item.name;
            select.append(option);

Here is attempt #2

function loadStrategies(callback) {
    $.getJSON("http://localhost:8080/api/v1/strategies", function(data) {
        data.forEach(function (item) {
            console.log(item.name);
            var select = document.getElementById("selectStrategy");
            select.options[select.options.length] = new Option(item.name,item.name);

Here is attempt #3

function loadStrategies(callback) {
    $.getJSON("http://localhost:8080/api/v1/strategies", function(data) {
        data.forEach(function (item) {
            console.log(item.name);
            var select = document.getElementById("selectStrategy");
            var option = document.createElement('option');
            option.value = item.name;
            option.innerHTML = item.name;
            select.appendChild(option);

I have also tried option.text instead of option.innerHTML

Here is attempt #4

function loadStrategies(callback) {
    $.getJSON("http://localhost:8080/api/v1/strategies", function(data) {
        console.log("strategies getJSON data=", data);
        data.forEach(function (item) {
            console.log(item.name);
            var option = "<option value=" +item.name +">" +item.name +"</option>";
            $('#selectStrategy').append(option);

In all cases, nothing is added to the select list and no errors in the console. console.log(item.name) correctly shows the name that I want to put in the options. Suggestions?

EDIT Attempt #5

   function loadStrategies() {

    $.getJSON('http://localhost:8080/api/v1/strategies') 
        .then(data => {
        const $sel = $('#selectStrategy')
        data.forEach(({name})=> $sel.append(new Option(name, name)));  
        })
    }

Attempt #6

function loadStrategies(callback) {
    $.getJSON("http://localhost:8080/api/v1/strategies", function(data) {
        data.forEach(function (item) {
            console.log(item.name);
            let option = new Option();
            option.innerHTML = item.name;
            option.value = item.name;
            $('#selectStrategy').appendChild(option);
            let row = $('<tr class="clickable">');
            row.append($('<td class="left">').html(item.name));
            row.append($('<td>').html(item.version));
            row.append($('<td> class="right"').html(item.total_return));
            $('#strategy').append(row);
        });
    });
}

In the above example, I include more stuff that is in the same loop but adds rows to a table. It works just fine so why doesn’t the part that adds items to a list work?:

$(document).ready(function () {
    loadWatchlist();
    loadStrategies();

Answer

if you want to add multiple options you must use loop

 $('#selectStrategy').append('<option value="'+item.name+'">'+item.name+'</option>');