创建用某个 json 文件替换 href 的下拉菜单

Question

上下文：我正在尝试创建一个简单的项目（决策树），我想知道如何创建一个下拉菜单，以便用户可以 select 一个特定的选项和从 json 文件中检索输出。

这是 HTML 代码：

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>

如您所见，我只允许用户访问 'coronary.json' 文件，但我希望允许用户有一定的灵活性，并且 select下拉菜单中的选项。我怎样才能让用户 select 有一个选项，然后传递给 window.location.href.replace... 以使用给定文件的信息？

我相信我必须创建某种 querySelector 来检索每个选项的值，然后将这些值传递给 window.location.href，但我不确定我该怎么做这样做

提前致谢！

Answer 1

要监听 select 元素上的更改事件，您可以像这样观察更改：

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>

或者，这可能是更好的方法，您可能想要添加一个带有 onclick 事件的按钮：

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>

如果库函数 decisiontree.create 需要 URL 秒，那么您可能会给它赋值 ./${selectedValue }（假设您将 JSON 文件托管在同一个目录中文件夹作为您的 HTML 文件）或者完整的 URL（例如：http://localhost:8000/${selectedValue}）和 2 个 DOM 元素。

如果它需要一个包含来自 JSON 文件的数据的 JS 对象，那么您可能需要使用类似 fetch API:

的东西

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

创建用某个 json 文件替换 href 的下拉菜单

Create dropdown menu that replaces href with a certain json file

javascript

decision-tree