在动态呈现的 select 中保留默认选项 - 当默认为 selected 时使输出为 null 并具有相应的结果（Javascript Only Please）

Question

我下面有一些代码显示两个 select。名称 Select 根据标记 Select 中的选项 select 过滤。

这一切都很好，但是，我想在名称 Select 中保留一个默认选项，即使在标记 selected 之后也是如此。

无论在标签 Select 中选择了什么，第一个选项都是“请 Select”之类的内容。 - 我仍然希望保留当前功能，因此在单击标签 Select 后，它仍会根据标签 Select 中的内容 Select 在名称 Select 中显示选项 Select .

基本上它会像现在一样运行，但有一个默认选项作为名称的第一个选项。

更新：下面的代码已经用@CharlesEF 提供的答案进行了更新，它适用于这个问题的第一部分。但是，由于答案已在回复中提供，因此我无法将其标记为正确。

我在下面包含了带有其他问题的更新代码。如果默认名称或标签选项“请select”是selected.

，我需要价格输出恢复为空值或默认值

使用当前代码，当名称或标签的“请select”选项被select编辑时，价格输出与之前select编辑的名称保持一致。

let result = [{
    name: "some name",
    tag: "some tag",
    price: "50"
  },
  {
    name: "some name1",
    tag: "some tag1",
    price: "10"
  },
  {
    name: "some name1-2",
    tag: "some tag1",
    price: "20"
  },
  {
    name: "some name2",
    tag: "some tag2",
    price: "30"
  },
  {
    name: "some name2-2",
    tag: "some tag2",
    price: "40"
  }
];

//Generic function to fill a dropdown with options 
let populateDropDown = (params) => {
  let set = new Set()
  params.optionsToPopulate.forEach(item => {
    const txt = item[params.text];
    if (!set.has(txt)) {
      params.element.add(new Option(txt, txt))
       set.add(txt);
    }
  })
}

//Initialize tags dropdown
(function() {
  document.getElementById("tags").addEventListener('change', (event) => {
    tagChanged(event);
  });

  let params = {
    optionsToPopulate: result,
    element: document.getElementById("tags"),
    id: "tag",
    text: "tag"
  }
  populateDropDown(params);

})();

//Tags dropdown change event.
let tagChanged = (event) => {
  let tagValue = event.target.value;

  //filter the results based on the value of tags dropdown
  let optionsToAdd = result.filter(item => item.tag === tagValue);
  let names = document.getElementById("names");
  names.options.length = 1;
  let params = {
    optionsToPopulate: optionsToAdd,
    element: names,
    id: "name",
    text: "name"
  }
  populateDropDown(params);
}

  //Function to place price in span
  let populatePrice = (params) => {
    params.priceToPopulate.forEach((item) => {
      params.spanElement.innerHTML =
        (item[`${params.text}`], item[`${params.text}`]);
    });
  };

  //Initialize price span
  (function () {
    names.addEventListener("change", (event) => {
      nameChanged(event);
    });
  })();

  //Names dropdown change event.
  let nameChanged = (event) => {
    let nameValue = event.target.value;

    //Filter URL results based on the value of names dropdown
    let priceToAdd = result.filter((item) => item.name === nameValue);
    let priceSpan = document.getElementById("price");
    let params = {
      priceToPopulate: priceToAdd,
      spanElement: priceSpan,
      id: "price",
      text: "price",
    };
    populatePrice(params);
  };

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  Tags:
  <select id="tags">
  <option value="please select">please select</option> 
  </select>

  <br><br><br> Names:
  <select id="names">
  <option value="please select">please select</option> 
  </select>
  
  <br><br><br> Price:
  <span id="price"></span>
</body>

</html>

Answer 1

您可以使用特定标签存储默认值：

let result = [{
    name: "default name",
    tag: "__$__"
  },
  {
    name: "some name",
    tag: "some tag"
  },
  {
    name: "some name1",
    tag: "some tag1"
  },
  {
    name: "some name1-2",
    tag: "some tag1"
  },
  {
    name: "some name2",
    tag: "some tag2"
  },
  {
    name: "some name2-2",
    tag: "some tag2"
  }
];

然后将您的选择器扩展为：

//filter the results based on the value of tags dropdown
let optionsToAdd = result.filter(item => item.tag === "__$__" || item.tag === tagValue);

这样做的好处是您可以在数据源和渲染之间保持角色分离。

Answer 2

第一个选项 在 HTML 标记中硬编码默认的第一个选项，然后使用 'names.options.length = 1;'。这将保留默认的第一个选项。

第二个选项 在 Javascript 中添加默认的第一个选项，在循环之前填写名称。

您的跨度需要使用 javascript 清除。只需添加 1 行代码，'document.getElementById("price").innerHTML = "";'。您可以将此行放在 'tagChanged' 函数或填充下拉列表的函数中。

编辑：

如果要在选择第一个选项时清除'price'，则需要在'tagChanged' 函数中添加一个if 测试。测试选项值是否等于默认第一个选项的值。如果是，清除跨度。

很高兴这有帮助。

在动态呈现的 select 中保留默认选项 - 当默认为 selected 时使输出为 null 并具有相应的结果（Javascript Only Please）

Keep a default option in dynamically rendered select - when default is selected make output null with corresponding result (Javascript Only Please)

javascript

html-select

dropdown