如何用jQuery/JavaScript将数据分组插入select的optgroup中？

解决这个问题的核心是先按code字段对数据进行分组，再依次创建optgroup和对应的option元素。以下是完整实现：

步骤1：对原始数据按code分组 #

先将数据归类，生成一个以code为键、对应数据数组为值的对象：

const groupedData = {};
$.each(data.bank, function(i, item) {
  // 若当前code未作为键存在，初始化空数组
  if (!groupedData[item.code]) {
    groupedData[item.code] = [];
  }
  // 将当前数据项加入对应code的数组
  groupedData[item.code].push(item);
});

步骤2：生成带optgroup的下拉框 #

创建select元素，再遍历分组后的数据，依次生成optgroup和内部option：

// 创建select元素并添加到容器
const $select = $('<select name="bankselect" id="bankselect" class="bankselect"></select>');
$('#selectiona').append($select);

// 遍历分组数据生成结构
$.each(groupedData, function(code, items) {
  // 创建optgroup并设置label
  const $optgroup = $('<optgroup>', { label: code });
  // 为当前组的每个数据项创建option
  $.each(items, function(i, item) {
    $optgroup.append($('<option>', {
      value: item.id,
      text: item.banks
    }));
  });
  // 将optgroup添加到select中
  $select.append($optgroup);
});

完整整合代码 #

替换你原有的代码即可：

// 数据分组
const groupedData = {};
$.each(data.bank, function(i, item) {
  if (!groupedData[item.code]) {
    groupedData[item.code] = [];
  }
  groupedData[item.code].push(item);
});

// 生成下拉选择框
const $select = $('<select name="bankselect" id="bankselect" class="bankselect"></select>');
$('#selectiona').append($select);

$.each(groupedData, function(code, items) {
  const $optgroup = $('<optgroup>', { label: code });
  $.each(items, function(i, item) {
    $optgroup.append($('<option>', {
      value: item.id,
      text: item.banks
    }));
  });
  $select.append($optgroup);
});

这段代码会生成你期望的HTML结构，每个code对应一个optgroup，同组的option被包裹在对应的分组内。

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