如何从JSON导入数据到下拉菜单，选中后更新页面加密货币信息

代码调整方案 #

原有代码核心问题 #

• 下拉选项未绑定加密货币的对应索引/标识，value值为空，选中后无法匹配对应数据
• 下拉框onchange事件绑定逻辑错误，模板字符串中this.value指向无效
• 未全局存储请求到的加密货币数组，选中后无数据源可查询
• 循环加密货币数组时重复绑定input的keyup事件，会触发多次计算导致结果错误
• GetDetails函数中select变量未定义，取值逻辑缺失
• 直接修改nk、kp的innerHTML会覆盖原有前置文本，不符合页面结构设计

修正后完整JavaScript代码 #

let addselect = document.getElementById("addselect");
// 选中对应文本展示的span节点，不覆盖前置标签文本
let krypto_name = document.querySelector("#nk .spizial");
let krypto_preis = document.querySelector("#kp .spizial");
let krypto_logo = document.getElementById("icons");
let krypto_link = document.getElementById("link");
let insgesamt = document.getElementById("gesamt");
let inputpreis = document.getElementById("inputpreis");
// 全局存储加密货币数组
let cryptoList = [];
// 存储当前选中的加密货币单价，用于金额计算
let currentPrice = 0;

let xReq = new XMLHttpRequest();
let api = "db.json";
xReq.open("GET", api, true);
xReq.onload = function () {
  cryptoList = JSON.parse(xReq.responseText);
  Dateinmapen(cryptoList);
  // 默认选中第一个加密货币，页面加载后直接展示内容
  if (cryptoList.length > 0) {
    updateCryptoInfo(0);
  }
};
xReq.send();

function Dateinmapen(datein) {
  // 渲染下拉框，option的value存数组索引，选中后直接通过索引取对应数据
  addselect.innerHTML = `
    <select id="selectkrypto" onchange="GetDetails(this.value)">
      ${datein.map((item, index) => `<option value="${index}">${item.cryptoname}</option>`).join('')}
    </select>
  `;
  // 只绑定一次input输入事件，避免重复绑定逻辑混乱
  inputpreis.addEventListener("keyup", () => {
    if (inputpreis.value && currentPrice) {
      insgesamt.innerHTML = Math.floor(inputpreis.value * currentPrice);
    } else {
      insgesamt.innerHTML = '';
    }
  });
}

// 根据选中的索引更新页面信息
function GetDetails(index) {
  updateCryptoInfo(Number(index));
}

// 封装更新页面信息的公共方法
function updateCryptoInfo(index) {
  const crypto = cryptoList[index];
  krypto_name.innerHTML = crypto.cryptoname;
  krypto_preis.innerHTML = crypto.price;
  krypto_logo.src = crypto.img;
  krypto_logo.alt = crypto.cryptoname;
  krypto_link.setAttribute("href", crypto.link);
  currentPrice = crypto.price;
  // 切换加密货币后自动重新计算对应金额
  if (inputpreis.value) {
    insgesamt.innerHTML = Math.floor(inputpreis.value * currentPrice);
  }
}

内容的提问来源于stack exchange，提问作者M K