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" }
]

但是，下拉列表不会清除或更新。非常感谢您的帮助。

根据下拉菜单清除并更新下拉菜单

0 个答案: