如何从JSON哈希数据创建动态HTML select下拉选项

不需要引入额外第三方库，几十行原生代码即可完成字符串解析、分组、下拉框生成全流程，最终生成的结构完全匹配需求。

完整可运行代码 #

<!-- 页面原有占位select标签 -->
<select name="datas" id="datas"></select>

<script>
// 原始字符串数据
const rawData = 'A,bb,100|A,ff,200|A,ee,100|D,ee,3|D,gg,10|R,ii,7';

// 第一步：按首字段分组聚合数据
const groupMap = {};
rawData.split('|').forEach(itemStr => {
  const [groupName, optionText, optionValue] = itemStr.split(',');
  if (!groupMap[groupName]) groupMap[groupName] = [];
  groupMap[groupName].push({
    text: optionText,
    value: optionValue
  });
});

// 第二步：遍历分组生成独立select，替换原有占位节点
const placeholder = document.getElementById('datas');
const parent = placeholder.parentNode;

Object.entries(groupMap).forEach(([groupName, optionList]) => {
  // 创建当前分组的select容器
  const selectEl = document.createElement('select');
  // 生成分组名首选项（value为空）
  const firstOpt = document.createElement('option');
  firstOpt.value = '';
  firstOpt.textContent = groupName;
  selectEl.appendChild(firstOpt);
  // 生成分组内的普通选项
  optionList.forEach(opt => {
    const optEl = document.createElement('option');
    optEl.value = opt.value;
    optEl.textContent = opt.text;
    selectEl.appendChild(optEl);
  });
  // 插入到页面中
  parent.insertBefore(selectEl, placeholder);
});
// 移除原有的占位select
parent.removeChild(placeholder);
</script>

核心逻辑说明 #

• 数据处理阶段：直接按|、,两层切割字符串完成解析，不需要额外做JSON格式转换，代码足够轻便，按首字段自动聚合同组数据
• DOM生成阶段：每个分组对应一个独立select标签，严格按照要求把分组名作为value为空的首选项，同组其他条目按「文本为第二个字段、value为第三个字段」的规则生成option
• 兼容原有结构：新生成的下拉框会自动替换原有id为datas的占位标签，不需要额外修改页面其他容器代码

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