Estoy tratando de crear un gráfico usando dos listas desplegables. Mi objetivo es que cada vez que se seleccione el primer menú desplegable con un nuevo elemento, el segundo menú desplegable se actualice a su valor predeterminado. Para hacerlo, aquí está mi código.

El problema es con el enfoque actual, cada vez que selecciono un elemento del primer menú, se agrega una nueva lista a la anterior en el segundo menú desplegable. Intenté agregar una declaración de eliminación para #selectButton1 pero esto la elimina por completo y nunca permite que se vuelva a mostrar. ¿Cuál es la mejor manera de actualizar el segundo menú desplegable cada vez que se cambia la selección en el primero?

 <!-- Initialize first select button --> <select id="selectButton"></select> <!-- Initialize second select button --> <select id="selectButton1"></select> // create list for first dropdown var allGroup = ["select", "1", "2", "3"] // add the options to the First dropdown d3.select("#selectButton") .selectAll('myOptions') .data(allGroup) .enter() .append('option') .text(function (d) { return d; }) // text showed in the menu .attr("value", function (d) { return d; }) // corresponding value returned by the button // what happens selecting frist dropdwon d3.select("#selectButton").on("change", function(d) { // clean up svg from previous graphs d3.select("svg").remove(); // create new svg to plot new graphs based on new selections svg = d3 .select("body") .append("svg") .attr("id", "sgv") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("id", "plot-a") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // take selected value from first dropdown var selectedOption = this.value // create the list for second drop down var allGroup1 = ["select", "1", "2"] // add the options to the button. First dropdown d3.select("#selectButton1") .selectAll('myOptions') .data(allGroup1) .enter() .append('option') .text(function (d) { return d; }) // text showed in the menu .attr("value", function (d) { return d; }) // corresponding value returned by the button // now select the item from second dropdown d3.select("#selectButton1").on("change", function(d) { var selectedOption1 = this.value // call the update function to draw the new graph based on the two selections update(selectedOption, selectedOption1) })