在动态呈现的select中保留一个默认选项-当选择default时，使输出为null并具有相应的结果(只请Javascript)
下面有一些显示两个选择的代码。根据标签选择中选择的选项筛选名称选择。
这一切都很好，然而，我想保留一个默认的选项在名称选择，即使在标签已经被选中。
类似于“请选择”作为第一个选项，而不管在标签选择中选择什么。-我仍然希望保持当前的功能，所以在单击标签选择之后，它仍将显示基于标签选择中所选内容的名称选择中的选项。
基本上，它将像现在一样工作，但有一个默认选项作为名称的第一个选项。
更新:下面的代码已经用@CharlesEF提供的答案进行了更新，它适用于这个问题的第一部分。然而，由于答案是在答复中提供的，所以我无法标记为正确。
我已经包括了更新的代码，下面还有一个额外的问题。如果选择了默认名称或标签选项“请选择”，我需要价格输出恢复为null或默认值。
使用当前代码，当为名称或标签选择“请选择”选项时，价格输出将与先前选择的名称保持一致。
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>
回答 2
Stack Overflow用户
发布于 2020-07-24 03:54:38
第一个选项硬编码默认的第一个选项在HTML中，然后使用'names.options.length = 1;‘。这将保留默认的第一个选项。
第二个选项在Javascript中添加默认的第一个选项，在循环之前填充名称。
需要使用javascript清除span。只需添加1行代码，'document.getElementById("price").innerHTML =“；”。您可以将这一行放在“tagChanged”函数或填充下拉列表的函数中。
编辑：
如果您想在选择第一个选项时清除“价格”，那么需要在'tagChanged‘函数中添加一个If测试。测试选项值是否等于默认的第一个选项的值。如果是的话，就把跨度挪开。
很高兴这能帮上忙。
Stack Overflow用户
发布于 2020-07-23 23:34:31
可以使用特定的标记存储默认值：
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);这样做的好处是，您可以在数据源和呈现之间保持角色分离。
https://stackoverflow.com/questions/63063719
复制相似问题
腾讯云开发者
