下拉列表填充相同的值

Question

我在重新填充下拉列表时遇到问题。我有一个代码来填充fecth的下拉列表。它在选择标签中提供了 3 个选项。现在我有一个用作"刷新服务器"的按钮。On click它再次调用fetch function。我试图on click remove选择标签中的所有选项并重新填充它。这是我的代码

for (let i = length - 1; i >= 0; i--) {
select.remove(i);
}
setTimeout(fetchUrl, 1000);

我遇到的问题是我删除了前 3 个选项，但它使 6 个选项具有相同的值。它应该是这样的：

Option1  Pump1
Option2  Pump2
Option3  Pump3

但我得到的结果是这样的。

Option1  Pump1
Option2  Pump2
Option3  Pump3
Option4  Pump1
Option5  Pump2
Option6  Pump3

我的抓取

fetch(url)
.then((res) => res.json())
.then((data) => {
opt = data;
console.log(data);
opt.forEach((item) => {
console.log(item);
options.push({
v: item.name,
t: item.name,
});
});
let selectTag = $("#node-input-options")[0];
let elem = $("#node-input-filter");
//                                                                                         Loop through the options and for every element create <option></option>
for (let i = 0; i < options.length; i++) {
let value = options[i].v;
let text = options[i].t;
$("#node-input-options").append(
$("<option></option>").attr("value", value).text(text) //For every element in the select tag append appropriate value and text (   <option value="#">#</option>    )
);
}

Answer 1

看到你的代码，你

1. 不需要创建不必要的数组
2. 清除选择，.html() 将执行此操作
3. 仅附加获取数据 - 现在您继续附加到选项数组

<小时 />

fetch(url)
.then((res) => res.json())
.then((data) => {
$("#node-input-options")
.html(`<option>Please select</option>`)
.append(
data
.map(({name}) => `<option value="${name}">${name}</option>`)
.join("")
)
});