向选择添加选项并使用 select2答案

【问题标题】：Adding options to a select and using select2向选择添加选项并使用 select2
【发布时间】：2023-01-22 17:38:22
【问题描述】：

我正在尝试向 select 下拉列表添加选项。我正在使用 js 动态执行此操作。

当我使用一个 select 列表执行此操作时，它可以工作，但我需要动态添加更多 select 列表，因为用户想要添加更多集合。

我的一个列表像这样工作得很好：

<body>
<select class="js-example-basic-single" name="state"></select>
</body>

<script>
$(document).ready(function() { 
    $('.js-example-basic-single').select2();
});

load_workout_lst({{workout_list | tojson}});

let lst = {{workout_list | tojson}};
let e = document.getElementsByName('state');
console.log(e);
for(var i = 0, l = lst.length; i < l; i++){
    var option2 = lst[i];
    e[0].options.add(new Option(option2));
}
</script>

我注意到当我console.log(e)时，我得到了NodeList。因为我知道该列表中只有一项，所以我选择第一项。我访问它的options 并添加到它。它很好用。

当我动态添加选择菜单时，我这样做：

let exercise = $("#exercise");
var input;
var input = $("<select>").attr("type", "text").attr("name", exerciseName).attr("tabindex", tabIndexNum);  
var br = $("<br>");
exercise.append(br);
exercise.append(input);
input.select2();
console.log(input);
for(var i = 0, l = workout_lst.length; i < l; i++){
    console.log(workout_lst[i]);
    var item = workout_lst[i];
    input.options.add(new Option(item));
}
tabIndexNum++;

var workout_lst = [];

function load_workout_lst(lst){
    for (let i = 0; i < lst.length; i++){
        workout_lst.push(lst[i]);
    }
}

错误：

Uncaught TypeError: input.options is undefined

当我在这里 console.log(input) 时，我得到一个 Object。我确定这是我的问题，我只是不知道如何推送或添加到Object。我需要以不同的方式添加到对象吗？我在这里做错了什么？

【问题讨论】：

标签： javascript jquery-select2

【解决方案1】：

在管理选项方面，我发现官方 select2 文档非常简单。例如，您可以使用下面的代码 sn-p 来追加和选择选项。有关更多详细信息，我已经留下了参考资料。

var data = {
    id: 1,
    text: 'Barn owl'
};

var newOption = new Option(data.text, data.id, true, true);
$('#mySelect2').append(newOption).trigger('change');

参考：
https://select2.org/programmatic-control/add-select-clear-items

【讨论】：