如何用JSON数据填充HTML多选框？Ajax循环与下拉框有差异

嘿，我来帮你搞定这个多选框填充的问题！你之前提到循环逻辑和下拉框不一样导致失败，其实本质上多选框的选项结构和下拉框是一致的，都是用<option>元素，核心区别是要给<select>加上multiple属性来开启多选功能。下面给你完整的实现步骤和代码示例：

1. 先准备好HTML结构 #

首先确保你的多选框标签带有multiple属性，还可以加size属性设置显示的行数，方便用户选择：

<!-- 带多选功能的下拉框 -->
<select id="multiSelect" multiple size="5"></select>

2. 原生JavaScript实现（Fetch API） #

假设你的JSON数据结构是类似这样的数组：

[
  {"name": "北京分公司", "address": "北京市朝阳区XX大厦"},
  {"name": "上海分公司", "address": "上海市浦东新区XX广场"},
  {"name": "广州分公司", "address": "广州市天河区XX中心"}
]

用原生Fetch发起请求并填充选项：

// 获取页面上的多选框元素
const multiSelect = document.getElementById('multiSelect');

// 发起Ajax请求获取JSON数据
fetch('你的JSON数据接口地址')
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => {
    // 先清空多选框原有选项，避免重复加载
    multiSelect.innerHTML = '';
    
    // 循环遍历JSON数据，逐个创建选项
    data.forEach(item => {
      const option = document.createElement('option');
      // 设置选项显示的文本（用name字段）
      option.textContent = item.name;
      // 设置选项的value值（用address字段，也可以用id等其他字段）
      option.value = item.address;
      
      // 可选：如果需要默认选中某个选项，添加判断
      // if (item.name === '上海分公司') {
      //   option.selected = true;
      // }
      
      // 将选项添加到多选框中
      multiSelect.appendChild(option);
    });
  })
  .catch(error => {
    console.error('填充多选框出错:', error);
  });

3. jQuery版本实现（如果项目用了jQuery） #

如果你习惯用jQuery的Ajax，代码会更简洁：

$.ajax({
  url: '你的JSON数据接口地址',
  dataType: 'json',
  success: function(data) {
    // 清空原有选项
    $('#multiSelect').empty();
    // 循环生成选项并添加
    $.each(data, function(index, item) {
      $('#multiSelect').append(`<option value="${item.address}">${item.name}</option>`);
    });
  },
  error: function(xhr, status, error) {
    console.error('请求出错:', error);
  }
});

几个容易踩坑的关键点 #

• 一定要给<select>加multiple属性，否则它就是普通下拉框，无法多选
• 填充前记得清空原有选项，避免重复加载数据导致选项重复
• 选项的value和显示文本可以根据你的业务需求调整，不一定非要用name和address
• 如果需要默认选中某些选项，在创建<option>时设置selected = true即可

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