原生JS实现下拉框显示指定值并传递对应参数至API

1. 修改下拉菜单生成函数 listDataNames #

调整下拉项显示内容，并为每个选项绑定点击事件以传递对应参数：

// 创建函数向下拉框UL插入数据
function listDataNames(dataStation) {
  // 清空列表避免重复渲染
  list.innerHTML = '';
  // 遍历结果并追加数据
  dataStation.floodguard_stations.rows.forEach(function (clickedNames) {
    // 仅展示name_BG的值
    const link = document.createElement('a');
    link.className = 'dropdown-item';
    link.href = '#';
    link.textContent = clickedNames.name_BG;
    
    // 绑定点击事件，传递对应的name参数
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为
      getMikeFWData(clickedNames.name); // 调用目标函数并传参
    });
    
    const item = document.createElement('li');
    item.appendChild(link);
    list.appendChild(item);
  });
  // 最终将所有数据追加到UL
  ulNames.appendChild(list);
}

2. 修改目标函数 getMikeFWData #

让函数接收参数，并将其拼接到API请求地址中：

async function getMikeFWData(stationName) {
  // 将传入的stationName拼接到API地址中（可根据实际API格式调整参数位置）
  const apiUrl = `http://your-api-domain/your-path?station=${encodeURIComponent(stationName)}`;

  const response = await fetch(apiUrl);
  const mikefwdata = await response.json();

  const mikefwdate = mikefwdata.floodguard_mikefw.rows.map((x) => x.date);
  console.log(mikefwdate);
  const mikefwvalue = mikefwdata.floodguard_mikefw.rows.map((x) => x.level);
  console.log(mikefwvalue);

  mikeFWLabelChart = mikefwdate;
  mikeFWDataChart = mikefwvalue;
}

关键改动说明 #

• 显示内容调整：移除原代码中name_BG - name的拼接，仅保留name_BG作为下拉项显示文本
• 点击事件绑定：通过addEventListener为每个下拉项绑定点击逻辑，直接传递对应数据的name字段
• 函数参数化：修改getMikeFWData使其接收参数，并用encodeURIComponent处理参数避免URL编码异常
• DOM结构修复：原代码存在嵌套<li>的冗余结构，改为直接创建<a>标签并追加到<li>中，保证DOM结构合规

内容的提问来源于stack exchange，提问作者Ben Johnson