Очистить и обновить выпадающий список в зависимости от выпадающего

Question

Привет, я новичок в D3js и пытаюсь обновить раскрывающийся список с помощью D3js на основе другого раскрывающегося списка.

Ниже приведен код, который я использовал:

HTML У меня есть 2 выпадающих. Исходя из выбора dropdown2 ("dbadd"), я хотел бы обновить параметры dropdown2 ("metadd")

<span style="color:white"><b>Select Metabolite:</b>&nbsp;&nbsp;
        <select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count" data-size="10" id="metadd" name="metadd" >
   <option>abc</option>
   <option>def</option>
   <option>efg</option>
  </select>&nbsp;&nbsp;

<?php
     $ts = date("YmdHis");
 ?>

<span style="color:white"> <b>Select Database:</b>&nbsp;&nbsp;
  <select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count" multiple data-max-options="1" id="dbadd" name="dbadd" onchange="loadNewOptions('<?php echo $ts;?>');" >
    <option selected>pdbbind</option>
    <option>pdb</option>
    <option>brenda</option>
    <option>HMDB</option>

   </select>

JAVASCRIPT:

function loadNewOptions(ts){
  var jFile = ts+".json";
      $('#metadd').remove();
        d3.json("./options/"+jFile).then(function(data) {


          d3.select("#metadd")
          .selectAll("option")
          .data(data)
          .enter().append("option")
          .text(function(d) { return d.id; })
          .attr("value", function (d) {
            return d.id;
          });

        });
}

Файл JSON Это сгенерированный файл, который я хотел бы обновить в раскрывающемся списке

[
{ "id": "3,4-Methylenedioxymethamphetamine" },
{ "id": "4-Androstenedione" },
{ "id": "Abacavir" },
{ "id": "Warfarin" },
{ "id": "Zanamivir" },
{ "id": "Zidovudine" },
{ "id": "Zoledronic acid" },
{ "id": "Zonisamide" },
{ "id": "Zopiclone" }
]

Однако раскрывающийся список не очищается или не обновляется. Любая помощь очень ценится.