javascript - 下拉列表填充相同的值
问题描述
我在重新填充下拉列表时遇到问题。我有一个代码来填写下拉列表fecth
。它在 select tag 中有 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> )
);
}
解决方案
看到你的代码,你
- 不需要创建不必要的数组
- 清除选择, .html() 会这样做
- 仅附加获取数据 - 现在您继续附加到选项数组
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("")
)
});
推荐阅读
- python - 我想获得 Entrybox 和 Checkbutton 的值,但我什么也没得到,为什么?(我是 tkinter 的新手)
- php - 如何保存最小值价格?
- hdf5 - HDFql 获取组的大小
- c++ - 使(剥离的)DLL 无法与 C++ 控制台应用程序一起使用
- c++ - 数组变量周围的堆栈损坏
- xamarin - Xamarin.ios 应用程序在 HttpClient 异步请求上崩溃(SIGABRT:未连接套接字)
- c# - 如何捕捉元素是否不可见
- python - 乘法和重复的星号
- fibonacci - 斐波那契数列,公共静态 void xxx
- c++ - 在多线程程序中使用 libcurl 时获取信号 11 (SIGSEGV)