Create dropdown menu that replaces href with a certain json file

Context: I'm trying to create a simply project (a decision tree) and I'd like to know how could I create a drop down menu so that the user can select a specific option and retrieve a output from a json file.

This is the HTML code:

decisiontree.create(
  window.location.href.replace(/\/.*\.html$/, 'coronary.json'),
  document.getElementById('output'),
  document.getElementById('status')
);

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
  <title>Decision Tree</title>
  <script src="https://cdn.jsdelivr.net/npm/html-decision-tree/dist/decisiontree.js"></script>
  <link rel="stylesheet" href="../styles/tree.css">
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
  <div class="content">
    <header>
      <h1> Knowledge-Based Decision Tree </h1>
    </header>
    <main class="main-content">

      <div id="status">
        <select id="selection">
          <option value="coronary.json"> Hypertension Decision Tree </option>
          <option value="diabetes.json"> Diabetes Decision Tree </option>
        </select>
      </div>
      <div id="output"></div>
    </main>
  </div>
</body>
</html>

As you can see, I'm only allowing the user to access the 'coronary.json' file, but I'd like to allow the user to have some flexibility and select from a range of options from a dropdown menu. How could I make it so that the user selects an option and is then passed on the window.location.href.replace... to use the information of a given file?

I believe I'd have to create some kind of querySelector to retrieve the values of each option and then pass this values onto the window.location.href, but I'm not sure how I could do that

Thank you in advance!

To listen to change events on your select element you can observe changes like so:

const selectElement = document.querySelector('#selection');

const initialValue = selectElement.value;

console.log('initial value:', initialValue);

selectElement.addEventListener('change', (event) => {
  const selectedValue = event.target.value;
  //your logic goes here
  console.log('selection changed:', selectedValue)
});

<select id="selection">
  <option value="coronary.json"> Hypertension Decision Tree </option>
  <option value="diabetes.json"> Diabetes Decision Tree </option>
</select>

Alternatively, and this is probably the better approach, you may want to add a button with an onclick event:

function generateDecisionTree() {
  const selectedValue = document.querySelector('#selection').value;

  //your logic goes here
  console.log("Selected value:", selectedValue)
}

<select id="selection">
  <option value="coronary.json"> Hypertension Decision Tree </option>
  <option value="diabetes.json"> Diabetes Decision Tree </option>
</select>
<button onclick=generateDecisionTree()>Generate decision tree</button>

If the library function decisiontree.create takes URLs then you can likely give it the value ./${selectedValue } (assuming you're hosting your JSON files in the same folder as your HTML file) or maybe the full URL (eg: http://localhost:8000/${selectedValue}) and the 2 DOM elements.

If it takes a JS object containing data from your JSON file then you may need to use something like the fetch API:

fetch(`./${selectedValue }`)
  .then(response => response.json())
  .then(data => decisiontree.create(data,
    document.getElementById('output'),
    document.getElementById('status')));

Create dropdown menu that replaces href with a certain json file

Related

Recent Posts