Jquery 从api追加动态下拉值

我目前正在使用J QUERY处理项目。我有一个下拉字段名为CATEGORIES，它以下拉列表的形式显示数据库中存在的所有类别，用户从中选择一个类别，以此类推……现在我有一种情况，用户可以添加任意多个类别，然后将此类别数组存储在数据库中。对于此过程，我有一个+按钮来添加新的类别字段，例如，用户单击一个字段选择类别，然后单击+按钮，一个新的下拉字段出现，他再次单击选择类别等等。现在，我想实现的是，我希望在每个字段上执行此单击和选择过程，这意味着如果用户添加第二个类别字段，则应在单击时向他显示类别列表和第一次一样。我已经在第一个字段上实现了这个点击选择过程下面给出了代码，但是如何在所有字段上实现它呢

var url=base\u server\u url+“/category”；
var-cat；
var catParentName=''；
获取（url{
方法：“GET”，
标题：{
//“内容类型”：“应用程序/json”，
},
}).然后（（resp）=>resp.json（））
.then（功能（数据）{
//控制台日志（数据）；
cat=数据；
console.log（'cat:'，cat）
$.each（数据、函数（索引、值）{
//console.log（值）；
var option=“”+value.name+
"";
$（“.category”）。追加（可选）；
});
})

您需要在单击

+

后创建的选择框中加载相同的选项？请用该代码和html更新您的问题

    var url = base_server_url + "/category";
    var cat;
    var catParentName = '';
    fetch(url, {
            method: 'GET',
            headers: {
                // "Content-Type": "application/json",
            },
        }).then((resp) => resp.json())
        .then(function(data) {
            // console.log(data);
            cat = data;
            console.log('cat: ', cat)
            $.each(data, function(index, value) {
                // console.log(value);
                var option = "<option value='" + value._id + "' id='" + value.name + "'>" + value.name +
                    "</option>";
                $(".category").append(option);
            });
           
        })