Question

我有3个不同的下拉列表，它们都相互连接。在第二个下拉选项中显示基于第一个中的选择...依此类推

让我说我选择了第一部有书和电影。

如果我选择书籍---＆gt;冰与火之歌和国王的冲突出现了如果我选择电影---＆gt; Django Unchained，纸浆小说出现......等等。

然而，如果用户“选择错误的书”（让我们说冰与火之歌）并“回到书本”那么“错误”＆gt;同一本书仍出现在选择下拉列表中。

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

我试过这样做：

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

但它会完全删除第二个下拉列表的占位符。我希望占位符返回选项0 ---＆gt;选一本书

这是我的fiddle

请帮我解决这个问题

Answer 1

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

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

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

干杯。

Answer 2

将selectedIndex设置为-1以重置它以便不选择任何选项或将其设置为0以将其设置为列表中的第一个选项。

＆＃13;

150px

＆＃13;

var clk = function() {
  var index = this.dataset.index;
  document.querySelector("#s").selectedIndex = index;
};

document.querySelector("#b1").addEventListener("click",  clk);
document.querySelector("#b2").addEventListener("click",  clk);

＆＃13;

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

2 个答案: