JSON渲染select下拉选项时数据挤在同一行，如何实现逐行独立填充

你的下拉选项挤在同一行的异常，和是否需要给选项设置动态ID完全无关，核心问题出在DOM匹配、字符串拼接、循环逻辑三个环节：

• 选择器匹配错位：原代码中类名为food、drink的DOM节点是select内部的空<option>标签，并非外层的<select>元素。你将拼接好的完整<select>字符串赋值给该option的innerHTML后，会形成「select嵌套在option内部」的无效DOM结构，直接触发原生下拉框渲染异常，导致所有选项挤在同一行显示。
• HTML字符串拼接语法错误：拼接option标签时，错误将字符串连接的+写在了属性引号外侧，生成无效的标签属性，进一步破坏标签结构。
• 循环逻辑错位：渲染饮品选项时，循环长度条件误用了json.Food.length，虽然当前两类数据长度一致不会报错，但逻辑上未匹配对应数据源，后续数据结构调整时会直接触发渲染错误。

原生select本身支持选项逐行独立渲染，只要修正DOM结构和拼接逻辑即可实现预期效果，无需给每个选项创建动态ID。

1. 调整HTML结构：给两个外层的select标签添加专属类名作为选择锚点，删除select内部预留给food、drink类的空占位option：
   • 食品对应的select添加类food-select
   • 饮品对应的select添加类drink-select
2. 修正JS渲染逻辑：不再拼接完整的<select>外壳，仅生成需要插入的option标签内容，去掉拼接时位置错误的加号，修正语法问题。
3. 调整循环匹配规则：渲染饮品选项时，将循环长度改为匹配json.Drink.length，保证逻辑和数据源一一对应。

// 选中对应外层select元素
const foodSelect = document.querySelector('.food-select');
const drinkSelect = document.querySelector('.drink-select');

// 遍历食品数据生成选项
json.Food.forEach(item => {
  const option = new Option(item.name, item.id);
  foodSelect.add(option);
});

// 遍历饮品数据生成选项
json.Drink.forEach(item => {
  const option = new Option(item.name, item.id);
  drinkSelect.add(option);
});

相比字符串拼接插入HTML的写法，使用原生Option构造函数生成选项、调用add方法插入的方式，可以从根源避免标签拼接的语法错误，降低异常概率。

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