https://select2.org/programmatic-control/add-select-clear-items
我正试图将选项添加到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。我需要用不同的方式添加到一个对象上吗?我哪里做错了?
我发现官方的select2文档在管理选项方面非常简单。例如，您可以使用下面的代码片段来追加和选择选项。要了解更多细节，我留下了参考资料。
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