如何重置选择下拉列表的值

Question

我有 3 个不同的下拉菜单，它们都相互连接。在第二个下拉选项中根据第一个中的选择出现......等等

假设我选择在第一个中包含书籍和电影。

如果我选择书籍 ---> 如果我选择电影 ---> 出现冰与火之歌和列王冲突 ---> Django Unchained，低俗小说出现...等

但是，如果用户“错误”选择了错误的书（比如冰与火之歌）并返回书本 ---> 相同的书仍然出现在选择下拉列表中。

我想要做的是“重置”或先前选择的部分的清晰结果。

我试过这样做：

document.getElementById('books').value = "";

但它完全删除了第二个下拉列表的占位符。我希望占位符回到选项 0 ---> 选择一本书

这是我的小提琴

请帮我解决这个问题

Answer 1

如果我理解正确，您希望将所选选项更改回默认选项。为此，您可以执行以下操作：

document.getElementById('books').selectedIndex = 0;

这只是一个基本示例，其中所选选项切换回第一个选项。要进行更高级的重置，您可以data-default-index向呈现的选择添加属性并使用该值将其重置。这样您就可以使用非第一个元素作为默认元素。

干杯。