javascript - 添加选项以使用 javascript 或 jquery 选择元素不起作用

Question

我有一个选择下拉框，其中输入了一个选项。我想使用 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.log(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.log(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.log(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.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);

在所有情况下，选择列表中都没有添加任何内容，控制台中也没有错误。console.log(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.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);
        });
    });
}

在上面的示例中，我在同一个循环中包含更多内容，但将行添加到表中。它工作得很好，那么为什么将项目添加到列表中的部分不起作用？：

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

标签： javascripthtmljquery

Answer 1

这应该有效。至少它对我有用：D

let select = document.getElementById('selectStrategy');
let option = new Option();
option.innerHTML = 'Another new strategy';
option.value = 'new-strategy';
select.appendChild(option);