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

Question

我希望刷新html字段（下拉列表），因为我在默认情况下点击（图表类型）下拉列表中的图表类型。选择图表后的默认选择如下所示:(如果我从下拉列表中选择“饼图2D”）

现在，如果我选择另一个类似的图表“饼图3D”（具有相同的下拉字段）并且我也选择了字段数据，那么图像如下：

问题

现在如果我从下拉列表中再次选择“饼图2D”，我已经设置了第二个图像字段。我希望刷新字段，因为它显示在饼图2D的第一张图像中。因此，我应该如何更新该领域？

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

我希望我已经解决了我的问题，如果我的理解混乱很快就会回复。我希望解决不难！

感谢您的时间。

Answer 1

您可以为您的选择添加onchange事件监听器。如果您在JS中有一个函数updateDiv()，那么您可以通过更改<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;
}

Answer 2

我会做这样的事情：

$("#chartType).on("change", function() {
    refreshDivs(this.val());
});

function refreshDivs(value) {
    if(value=="Scatter Chart") {
        $("#divEventCategory").hide();
        $("#divEventSubCategory").hide();
    } else if ((value=="Bubble Chart") {
        $("#divEventCategory").show();
        $("#divEventSubCategory").show();
    }
}

如果您需要根据选择刷新下拉列表/列表框的内容，只需在相应的部分中添加代码。