Javascript 具有下拉列表id的Javascrip筛选器Json文件

我花了一周的时间试图根据从动态创建的下拉列表中获得的id过滤JSON文件

• CSS框架：Bootstrap
• JS框架：Jquery和引导JS

我试图创建的不是使用Jquery或引导Js。我试着用香草Js

第一:

我从一个JSON文件动态创建了下拉列表，并为每个元素分配了一个id

// DROPDOWN LIST FETCH JSON FILE
fetch('dropdown.json')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    let output = '';
    data.forEach(function (data) {
      output += `
          <a class="dropdown-item" href="#" id="${data.id}">${data.text}</a>
          `;
    });
    document.getElementById('div-dropdown-list').innerHTML = output;
  });

在这之后，我将根据获得的过滤id，以JSON文件为目标，输出我想要输出的数据

async function json() {
  const response = await fetch('data.json');
  const data = await response.json();
  return data;
}

json().then(info => console.log(info));

---

如何通过文档中的idSelected变量输出JSON数据筛选器。querySelector（'#div'）。addEventListener

我可以用这行操作系统代码解决此任务

let select = document.getElementById('Select');
let dropdown = '';

const showSelections = import('../metadata/dropdown.json').then(
  (module) => {
    const data = module.default;
    data.forEach((data) => {
      dropdown += `<option value="${data.id}">${data.value}</option>`;
    });
    div.innerHTML = dropdown;
  }
);

module.exports = showSelections;

let select=document.getElementById（'select'）；
让下拉菜单=“”；
const showSelections=import（'../metadata/dropdown.json'）。然后(
（模块）=>{
const data=module.default；
data.forEach（（数据）=>{
下拉菜单+=`${data.value}`；
});
div.innerHTML=下拉列表；
}
);
module.exports=显示选择；

let select = document.getElementById('Select');
let dropdown = '';

const showSelections = import('../metadata/dropdown.json').then(
  (module) => {
    const data = module.default;
    data.forEach((data) => {
      dropdown += `<option value="${data.id}">${data.value}</option>`;
    });
    div.innerHTML = dropdown;
  }
);

module.exports = showSelections;