如何通过API自动填充表单下拉框的股票代码选项？

我希望在表单中列出用户可选择的股票，但API提供的股票数量较多，目前仅手动添加选项做测试。请问能否通过API自动填充表单中的选项？只提取股票代码（symbol）并添加为表单选项即可。

以下是我的HTML表单代码：

<form method="post" action="" name="form">  
  <select name="stock" id="stockSelect">
      <option value="IBM">IBM</option>
      <option value="CELH">CELH</option>
      <option value="MAXR">MAXR</option>
      <option value="IMAB">IMAB</option>
  </select>
  <input name="submit" type="submit">
</form>

API返回的JSON格式示例：

{
  "data": [
    {
      "symbol": "A",
      "name": "Agilent Technologies, Inc.",
      "currency": "USD",
      "exchange": "NYSE",
      "mic_code": "XNYS",
      "country": "United States",
      "type": "Common Stock"
    },
    {
      "symbol": "AA",
      "name": "Alcoa Corporation",
      "currency": "USD",
      "exchange": "NYSE",
      "mic_code": "XNYS",
      "country": "United States",
      "type": "Common Stock"
    }
  ]
}

解决方案 #

完全可以实现，你可以用JavaScript的fetch API请求股票数据接口，解析返回的JSON后提取symbol字段，动态生成<option>元素并添加到下拉选择框中。

完整实现代码 #

<form method="post" action="" name="form">  
  <select name="stock" id="stockSelect">
      <!-- 这里会被API数据填充 -->
  </select>
  <input name="submit" type="submit">
</form>

<script>
// 替换成你的实际API地址
const STOCK_API_URL = '你的股票API接口地址';

// 获取下拉选择框元素
const stockSelect = document.getElementById('stockSelect');

// 请求并处理API数据
fetch(STOCK_API_URL)
  .then(response => {
    if (!response.ok) throw new Error('API请求失败');
    return response.json();
  })
  .then(apiData => {
    // 遍历股票数据生成选项
    apiData.data.forEach(stock => {
      const option = document.createElement('option');
      option.value = stock.symbol;
      option.textContent = stock.symbol;
      stockSelect.appendChild(option);
    });
  })
  .catch(error => {
    console.error('数据加载出错:', error);
    // 添加错误提示选项
    const errorOption = document.createElement('option');
    errorOption.value = '';
    errorOption.textContent = '股票列表加载失败，请刷新重试';
    stockSelect.appendChild(errorOption);
  });
</script>

关键说明 #

1. 给下拉框添加id="stockSelect"，方便JavaScript快速定位元素
2. 通过fetch发起API请求，验证响应状态后解析JSON数据
3. 遍历返回的data数组，为每个股票代码生成对应的<option>，将symbol同时设为选项的value和显示文本
4. 添加错误处理逻辑，请求失败时在控制台输出错误，并显示提示选项

内容的提问来源于stack exchange，提问作者64 bit