将 json 数据显示到选择选项中

Question

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

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

var json = {
  "Food": [{
    "id": "1",
    "name": "Fried Rice",
    "price": "10.000"
  }, {
    "id": "2",
    "name": "Fried Noodle",
    "price": "9.000"
  }, {
    "id": "3",
    "name": "Pancake",
    "price": "8.500"
  }, {
    "id": "4",
    "name": "French Fries",
    "price": "7.500"
  }],
  "Drink": [{
    "id": "1",
    "name": "Cola",
    "price": "4.600"
  }, {
    "id": "2",
    "name": "Orange Juice",
    "price": "5.400"
  }, {
    "id": "3",
    "name": "Mineral Water",
    "price": "3.500"
  }, {
    "id": "4",
    "name": "Coffee",
    "price": "5.800"
  }]
};

var str = '<select>';
for (var i = 0; i < json.Food.length; i++) {
  str += '<option value="' + json.Food[i].id + '"+ class="food">' + json.Food[i].name + '</option>    ';
}
str += '</select>';
$(".food").html(str)

var str = '<select>';
for (var i = 0; i < json.Food.length; i++) {
  str += '<option value="' + json.Drink[i].id + '"+ class="drink">' + json.Drink[i].name + '</option>';
}
str += '</select>';
$(".drink").html(str)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="container-fluid text-center">
    <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
    <div class="row">
      <div class="col-md-6">
        <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
          <option selected>Open Food Menu</option>
          <option value="1" class="food"></option>
        </select>
      </div>
      <div class="col-md-6">
        <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
          <option selected>Open Drink Menu</option>
          <option value="1" class="drink"></option>
        </select>
      </div>
    </div>
  </div>
</div>

Answer 1

您当前的代码正在尝试创建全新的 select 元素并将它们附加到现有的 option 元素中。相反，您只需要创建一个新的option 列表并将它们附加到现有的select。您可以使用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);

这可以进一步扩展到一个函数以减少代码重复。在以下 sn-p 中查看此操作：

let data = {Food:[{id:"1",name:"Fried Rice",price:"10.000"},{id:"2",name:"Fried Noodle",price:"9.000"},{id:"3",name:"Pancake",price:"8.500"},{id:"4",name:"French Fries",price:"7.500"}],Drink:[{id:"1",name:"Cola",price:"4.600"},{id:"2",name:"Orange Juice",price:"5.400"},{id:"3",name:"Mineral Water",price:"3.500"},{id:"4",name:"Coffee",price:"5.800"}]};

let createOptions = (arr, targetSelector) => $(targetSelector).append(arr.map(o => `<option value="${o.id}">${o.name}</option>`));
createOptions(data.Food, 'select.food');
createOptions(data.Drink, 'select.drink');

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="container-fluid text-center">
    <h2 style="font-size:70px; font-family:Lucida Console;">MENU</h2>
    <div class="row">
      <div class="col-md-6">
        <select class="form-select form-select-lg mb-3 food" aria-label=".form-select-lg example">
          <option selected>Open Food Menu</option>
        </select>
      </div>
      <div class="col-md-6">
        <select class="form-select form-select-lg mb-3 drink" aria-label=".form-select-lg example">
          <option selected>Open Drink Menu</option>
        </select>
      </div>
    </div>
  </div>
</div>

顺便说一句，请注意数据保存在 JS 对象中，而不是 JSON。我重命名了变量以更好地匹配正在使用的数据结构。

Answer 2

线 $(".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);