How to refresh HTML field on selecting the drop down list?

Question

I want to get html field (a drop down list) refreshed as I get it by default on clicking the chart type from the (chart type) drop down list. The default selection after selecting a chart is shown below: (if I select "Pie Chart 2D" from the drop down list)

Now if I select another similar chart "Pie Chart 3D" (which has same drop down field) and also I select the field data, then the image is as below:

PROBLEM

Now if I select the "Pie Chart 2D" back again from the drop down list I get this 2nd image field set already. I want the field to be refreshed as it is shown in the 1st image of Pie Chart 2D. Therefore, how should I refresh the field?

NOTE: The field that I want to refresh to default is "Define X-Axis" drop down list.

I hope I have cleared my problem, in case of confusion in the understanding I will be replying soon. I hope it is not difficult to solve!

Thanks for your time.

Answer 1

You can add an onchange event listener to your select. If you have a function updateDiv() in JS that would update your <div> element that you want to call with a change of the <select> element:

In HTML:

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

In jQuery:

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

In (plain) JS:

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

EDIT

I don't think I answered the question correctly above. I believe the question was more along the lines of, How could I deselect all the options in that field (once a select field was changed)? So I only answered the first part of the question, but the second part about resetting the other <select> element remains unsettled. (Am I correct?)

To do this, add a listener as shown above. And then, add the (plain) JS function:

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

Answer 2

I would do something like this:

$("#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();
    }
}

If you need to refresh the content of the dropdowns/listboxes based on the choice, just add the code in the corresponding section as well.