Styjun

Fixing a blind bolt hole when the first 2-3 threads are ruined?

Why didn't Doc believe Marty was from the future?

Historical Daf Yomi calendar

What is the purpose of Strength, Intelligence and Dexterity in Path of Exile?

How to differentiate between two people with the same name in a story?

Why did Starhopper's exhaust plume become brighter just before landing?

having problems with greek characters in a table using csvsimple

Generic method to call API functions with simple retrial on errors

Why did Lucius make a deal out of Buckbeak hurting Draco but not about Draco being turned into a ferret?

Could a complex system of reaction wheels be used to propel a spacecraft?

RAID0 instead of RAID1 or 5, is this crazy?

Necessity of tenure for lifetime academic research

What does "-1" represent in the value range for unsigned int and signed int?

Why do IR remotes influence AM radios?

Check if dependency between two variables is linear

How do you say "half the time …, the other half …" in German?

In what language did Túrin converse with Mím?

Where should I draw the line on follow up questions from previous employer

What's the difference between a variable and a memory location?

Is the Amazon rainforest the "world's lungs"?

Under GDPR, can I give permission once to allow everyone to store and process my data?

Is this position a forced win for Black after move 14?

How did medieval manors handle population growth? Was there room for more fields to be ploughed?

Inspiration for failed idea?

Clear and update dropdown based on dropdown

Get selected value in dropdown list using JavaScriptHow to clear the canvas for redrawingUpdating address bar with new URL without hash or reloading the pageClearing localStorage in javascript?Wanting to load image and some text for the selected option in a dropdown list using AjaxjQuery Get Selected Option From DropdownHow do I update each dependency in package.json to the latest version?d3js Tree Change Text Style OnClickAdd options to dropdown via JQuery AJAX request (as json Object)Run function after multiple dropdown options have been chosen

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

Hi I am new to D3js and I am trying to update a dropdown using D3js based on another dropdown.

Below is the code I have used:

HTML
I have 2 dropdowns. Based on the selection of dropdown2 ("dbadd"), I would like to update the options of 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 File
This is the generated file I would like to update the dropdown with

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

However, the dropdown does not clear or update. Any help is much appreciated.

javascript ajax d3.js

share|improve this question

edited Mar 27 at 22:24

Ann

asked Mar 27 at 22:17

AnnAnn

4388 bronze badges

add a comment | 

0

Hi I am new to D3js and I am trying to update a dropdown using D3js based on another dropdown.

Below is the code I have used:

HTML
I have 2 dropdowns. Based on the selection of dropdown2 ("dbadd"), I would like to update the options of 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 File
This is the generated file I would like to update the dropdown with

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

However, the dropdown does not clear or update. Any help is much appreciated.

javascript ajax d3.js

share|improve this question

edited Mar 27 at 22:24

Ann

asked Mar 27 at 22:17

AnnAnn

4388 bronze badges

add a comment | 

Hi I am new to D3js and I am trying to update a dropdown using D3js based on another dropdown.

Below is the code I have used:

HTML
I have 2 dropdowns. Based on the selection of dropdown2 ("dbadd"), I would like to update the options of 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 File
This is the generated file I would like to update the dropdown with

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

However, the dropdown does not clear or update. Any help is much appreciated.

javascript ajax d3.js

share|improve this question

edited Mar 27 at 22:24

Ann

asked Mar 27 at 22:17

AnnAnn

4388 bronze badges

<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>

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;
 );

 );

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

share|improve this question

edited Mar 27 at 22:24

Ann

asked Mar 27 at 22:17

AnnAnn

4388 bronze badges

share|improve this question

edited Mar 27 at 22:24

Ann

asked Mar 27 at 22:17

AnnAnn

4388 bronze badges

asked Mar 27 at 22:17

AnnAnn

4388 bronze badges

asked Mar 27 at 22:17

AnnAnn

4388 bronze badges