在动态呈现选择中保留默认选项-当选择默认值时，使用相应的结果使输出为空（请仅使用Javascript）

下面有一些代码显示了两个选项。名称选择将根据在标记选择中选择的选项进行过滤

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

像“请选择”这样的东西作为第一个选项，不管在标签选择中选择了什么。-我仍然希望当前功能保持不变，因此在单击“标记选择”后，它仍然会根据“标记选择”中选择的内容在“名称选择”中显示选项

基本上，它将像现在一样工作，但有一个默认选项作为名称的第一个选项

更新：下面的代码已经用@CharlesEF提供的答案进行了更新，它适用于这个问题的第一部分。然而，由于答案是在答复中提供的，我不能认为是正确的

我在下面添加了更新的代码和一个附加问题。如果选择了默认名称或标签选项“请选择”，我需要将价格输出恢复为null或默认值

对于当前代码，当为名称或标签选择“请选择”选项时，价格输出与先前选择的名称保持一致

让结果=[{
名字：“某个名字”，
标签：“一些标签”，
价格：“50”
},
{
名称：“一些名称1”，
标签：“一些标签1”，
价格：“10”
},
{
名称：“一些名称1-2”，
标签：“一些标签1”，
价格：“20”
},
{
名字：“一些名字2”，
标签：“一些标签2”，
价格：“30”
},
{
名称：“一些名称2-2”，
标签：“一些标签2”，
价格：“40”
}
];
//用选项填充下拉列表的通用函数
让populateDropDown=（参数）=>{
设集合=新集合（）
参数选项Topopulate.forEach（项=>{
const txt=项[params.text]；
如果（！set.has（txt））{
params.element.add（新选项（txt，txt））
set.add（txt）；
}
})
}
//初始化标签下拉列表
（功能（）{
document.getElementById（“标记”）.addEventListener（'change'，（event）=>{
（事件）；
});
设params={
选项填充：结果，
元素：document.getElementById（“标记”），
id:“标签”，
文本：“标签”
}
填充下拉列表（参数）；
})();
//标签下拉列表更改事件。
让tagChanged=（事件）=>{
让tagValue=event.target.value；
//根据“标记”下拉列表的值筛选结果
让选项toadd=result.filter（item=>item.tag==tagValue）；
让names=document.getElementById（“名称”）；
names.options.length=1；
设params={
选项填充：选项添加，
元素：名称，
id:“姓名”，
正文：“姓名”
}
填充下拉列表（参数）；
}
//函数将价格放置在跨度中
让populatePrice=（params）=>{
参数priceToPopulate.forEach（（项目）=>{
params.spanElement.innerHTML=
（项目[`${params.text}`]，项目[`${params.text}`]；
});
};
//初始化价格区间
（功能（）{
names.addEventListener（“更改”，（事件）=>{
名称变更（事件）；
});
})();
//名称下拉列表更改事件。
让名称更改=（事件）=>{
让nameValue=event.target.value；
//根据“名称”下拉列表的值筛选URL结果
让priceToAdd=result.filter（（item）=>item.name==nameValue）；
让priceSpan=document.getElementById（“价格”）；
设params={
priceToPopulate:priceToAdd，
span要素：价格span，
id:“价格”，
文字：“价格”，
};
人口价格（params）；
};

标签：
请选择



姓名：
请选择



价格：
您可以使用特定标记存储默认值：

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);

这样做的好处是，您可以在数据源和渲染之间保持角色分离。
您可以使用特定标记存储默认值：

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);

这样做的好处是，您可以在数据源和渲染之间保持角色分离。
1st option
硬编码HTML标记中的默认第一个选项，然后使用“names.options.length=1；”。这将保留默认的第一个选项

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

您的范围需要用javascript清除。只需添加1行代码，“document.getElementById（“price”）.innerHTML=“”；”。您可以将此行放入“tagChanged”函数或填充下拉列表的函数中

编辑：

如果要在选择第一个选项时清除“价格”，则需要在“tagChanged”函数中添加If测试。测试选项值是否等于默认的第一个选项的值。如果是，请清除跨度

很高兴这有帮助。
第一选项
硬编码HTML标记中的默认第一个选项，然后使用“names.options.length=1；”。这将保留默认的第一个选项

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

您的范围需要用javascript清除。只需添加1行代码，“document.getElementById（“price”）.innerHTML=“”；”。您可以将此行放入“tagChanged”函数或填充下拉列表的函数中

编辑：

如果要在选择第一个选项时清除“价格”，则需要在“tagChanged”函数中添加If测试。测试选项值是否等于默认的第一个选项的值。如果是，请清除跨度

很高兴这有帮助。
1st option：在HTML标记中硬编码第一个选项，然后使用'names.options.length=1；'。这将保留第一个选项。第二个选项是在Javascript中添加第一个选项，在循环之前填充名称。@CharlesEF谢谢。-你的解决方案奏效了，我很乐意