javascript - 如何在选择下拉列表时刷新 HTML 字段？

Question

我想要刷新 html 字段(下拉列表)，因为我在单击(图表类型)下拉列表中的图表类型时默认得到它。选择图表后的默认选择如下所示:(如果我从下拉列表中选择“Pie Chart 2D”)

现在，如果我选择另一个类似的图表“Pie Chart 3D”(具有相同的下拉字段)并选择字段数据，则图像如下:

问题

现在，如果我从下拉列表中再次选择“二维饼图”，我已经设置了第二个图像字段。我希望刷新该字段，如 2D 饼图的第一个图像中所示。那么，我该如何刷新该字段呢？

注意:我想要刷新为默认值的字段是“定义 X 轴”下拉列表。

我希望我已经解决了我的问题，如果理解上出现困惑，我会尽快回复。希望问题不难解决!

感谢您的宝贵时间。

Answer 1

您可以添加 onchange您选择的事件监听器。如果你有一个函数updateDiv()在 JS 中，这将更新您的 <div>您想要通过更改 <select> 来调用的元素元素:

在 HTML 中:

<select id="chartType" onchange="resetFieldToDefault();">

在 jQuery 中:

$("select#chartType").change(resetFieldToDefault);

在(普通)JS 中:

document.getElementById("chartType").addEventListener("change", resetFieldToDefault);

编辑

我认为我没有正确回答上面的问题。我相信问题更多的是，我如何取消选择该字段中的所有选项(一旦选择字段发生更改)？所以我只回答了问题的第一部分，但第二部分是关于重置另一个<select>元素仍悬而未决。 (我说得对吗？)

为此，请添加一个监听器，如上所示。然后，添加(普通)JS 函数:

var resetFieldToDefault = function() {
    var selectedOptions = document.getElementById("xAxisSelect").selectedOptions;
    for(var i = 0; i < selectedOptions.length; i++)
        selectedOptions[i].selected = false;
}