Javascript 将json数据显示到select选项中

当我单击选择选项时，结果是所有数据都合并到一行中。我想更改它，以便数据将填充select选项中的每一行

关于我应该更改或添加什么代码有什么建议吗？是来自循环还是我需要为select选项创建一个动态id

var json={
“食物”：[{
“id”：“1”，
“名称”：“炒饭”，
“价格”：“10.000”
}, {
“id”：“2”，
“名称”：“炒面”，
“价格”：“9.000”
}, {
“id”：“3”，
“名称”：“煎饼”，
“价格”：“8.500”
}, {
“id”：“4”，
“名称”：“炸薯条”，
“价格”：“7.500”
}],
“饮料”：[{
“id”：“1”，
“姓名”：“可乐”，
“价格”：“4.600”
}, {
“id”：“2”，
“名称”：“橙汁”，
“价格”：“5.400”
}, {
“id”：“3”，
“名称”：“矿泉水”，
“价格”：“3.500”
}, {
“id”：“4”，
“名称”：“咖啡”，
“价格”：“5.800”
}]
};
var-str=''；
for（var i=0；i

菜单
开放式食物菜单
打开饮料菜单

您当前的代码正在尝试创建全新的

元素，选择
元素并将它们附加到现有的
选项
元素中。相反，您只需要创建一个新的
选项列表
，并将它们附加到现有的
选择项
。您可以使用
map（）
更有效地执行此操作。请注意，我已将
.food
和
.drink
类位置移动到
select
元素

let foodOptions = data.Food.map(o => `<option value="${o.id}">${o.name}</option>`);
$('select.food').append(foodOptions);

let drinkOptions = data.Drink.map(o => `<option value="${o.id}">${o.name}</option>`);
$('select.drink').append(drinkOptions);

let foodOptions=data.Food.map（o=>`${o.name}`）；
$（'select.food'）.append（foodOptions）；
让drinkOptions=data.Drink.map（o=>`${o.name}`）；
$（'select.drink'）.append（drinkOptions）；

这可以进一步扩展到函数中，以减少代码重复。请参见以下代码段中的实际操作：


let data={Food:[{id:“1”，name:“炒饭”，price:“10.000”}，{id:“2”，name:“炒面”，price:“9.000”}，{id:“3”，name:“煎饼”，price:“8.500”}，{id:“4.500”}，饮料：[{id:“1”，name:“可乐”，price:“4.600”}，{id:“2”，name:“橙汁”，price:“5.400”}，{id:“3”，name:“矿泉水”，price:“3.500”}，name:“咖啡，{id:“4”}"5.800"}]};
让createOptions=（arr，targetSelector）=>$（targetSelector）.append（arr.map（o=>`${o.name}'）；
createOptions（data.Food，“select.Food”）；
createOptions（data.Drink，“select.Drink”）；

菜单
开放式食物菜单
打开饮料菜单
线路
$（“.drink”）.html（str）
在现有列表中添加您构建的html，这样您可以得到如下内容

<select>
  <option>
  <option>
    <select><option>....


....

您应该使用片段直接向DOM中添加元素，而不是构建HTML，这样效率更高

例如：

var food = $(".food");
var frag = document.createDocumentFragment();

for (var i = 0; i < json.Food.length; i++) {
    let option = document.createElement("option");
    option.value = json.Food[i].id;
    option.className = "food";
    option.text = json.Food[i].name;
    frag.appendChild(option);
}

food.appendChild(frag);

var food=$（“.food”）；
var frag=document.createDocumentFragment（）；
for（var i=0；i
您可以使用vanilla js吗？哦，我现在明白了，谢谢您的解释，先生。我还在学习，这真的帮助了我。再次感谢您的帮助！