Добавить возможность выбора элемента с помощью javascript или jquery не работает

У меня есть раскрывающийся список выбора с одним введенным параметром. Я хочу добавить дополнительные параметры в список, используя javascript или jquery. Я пробовал несколько способов, но ничего не работает. Вот 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>
    ...

Вот javascript: Попытка №1

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

Вот попытка №2

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

Вот попытка №3

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

Я также пробовал option.text вместо option.innerHTML

Вот попытка №4

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

Во всех случаях ничего не добавляется в список выбора и никаких ошибок в консоли. console.info(item.name) правильно показывает имя, которое я хочу указать в параметрах. Предложения?

РЕДАКТИРОВАТЬ Попытка №5

   function loadStrategies() {

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

Попытка №6

function loadStrategies(callback) {
    $.getJSON("http://localhost:8080/api/v1/strategies", function(data) {
        data.forEach(function (item) {
            console.info(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);
        });
    });
}

В приведенном выше примере я включаю больше элементов, находящихся в том же цикле, но добавляю строки в таблицу. Он отлично работает, так почему же не работает та часть, которая добавляет элементы в список?:

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