Question

我在重新填充下拉列表时遇到问题。我有一个代码来填充 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>    )
        );
      }

Answer 1

看到你的代码，你

不需要创建不必要的数组
清除选择，.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("")
      )
  });

下拉填充相同的值

1 个答案: