JavaScript下拉菜单切换时无法加载对应餐厅菜单数据问题

问题描述 #

页面下拉菜单通过loadRestaurants()可正常加载餐厅选项，但切换下拉菜单时无法展示对应餐厅的菜品数据，loadMenu()函数无法加载表格数据。

核心错误点 #

• HTML下拉菜单onchange绑定的是listMenu()，但JS中定义的函数为loadMenu()，函数名不匹配
• loadMenu()中尝试获取foodItem、resturantNo元素，但HTML中无对应DOM节点
• 代码使用未定义的restaurant变量，应使用循环中的restaurantitem变量
• 未根据选中的餐厅ID筛选菜品，会加载所有餐厅的菜品数据
• 生成表格行时缺失开头的<tr>标签，HTML结构不完整
• 加载新菜单前未清空表格原有内容，导致数据重复累加

修复后的代码 #

JavaScript代码 #

function loadRestaurants() {
  var parentElement = document.getElementById("restaurant");
  parentElement.innerHTML = "";
  // 添加默认提示选项
  parentElement.innerHTML += '<option value="">请选择餐厅</option>';
  for (var restaurantId in restaurantCollection) {
    var restaurantObj = restaurantCollection[restaurantId];
    var restaurantName = restaurantObj["name"];
    var restaurantNo = restaurantObj["id"];
    parentElement.innerHTML += '<option id="' + restaurantNo + '" value="' + restaurantNo + '">' + restaurantName + '</option>';
  };
}

// 加载选中餐厅的菜单
function loadMenu() {
  var restaurantNo = document.getElementById("restaurant").value;
  var foodItemsTbody = document.getElementById("fooditems");
  
  // 清空表格原有内容，避免数据重复
  foodItemsTbody.innerHTML = "";

  // 未选中餐厅时直接返回
  if (!restaurantNo) return;

  // 遍历菜品，筛选当前餐厅的菜品（假设菜品数据含restaurantId字段关联餐厅）
  for (var fooditemId in foodItemsCollection) {
    var fooditem = foodItemsCollection[fooditemId];
    if (fooditem["restaurantId"] !== restaurantNo) continue;

    // 生成完整表格行
    var htmlText =
      `<tr>
        <td>${fooditem["id"]}</td>
        <td>${fooditem["title"]}</td>
        <td>${fooditem["description"]}</td>
        <td>${fooditem["inStock"] ? "有货" : "缺货"}</td>
        <td>${fooditem["isVeg"] ? "素食" : "非素食"}</td>
        <td>${fooditem["category"]}</td>
        <td>${fooditem["cuisine"]}</td>
        <td><img src="${fooditem["image"]}" style="width:80px;height:80px" alt="${fooditem["title"]}"></td>
        <td><button>Edit</button></td>
      </tr>`;
    foodItemsTbody.innerHTML += htmlText;
  }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Food Menu</title>
  <script src="../admin_js/restaurantsData.js"></script>
  <script src="../admin_js/fooditemsData.js"></script>
  <script src="../admin_js/menuData.js"></script>
  <script src="../admin_js/adminmenu.js"></script>
  <link rel="stylesheet" href="../admin_styles/style.css">
  <link rel="stylesheet" href="../admin_styles/productsstyle.css">
</head>

<body>
  <div>
    <button class="home-button"><a href="../admin_views/admin_page.html">Home</a></button>
  </div>
  <div class="header"></div>
  <div class="main">
    <div class="container">
      <form name="ViewRestaurantMenu" id="RestaurantMenu" action="" onsubmit="event.preventDefault();">
        <h1>Menu</h1>
        <div class="row">
          <div class="col">
            <label for="restaurant">Select Restaurant</label>
            <!-- 修正onchange绑定的函数名 -->
            <select name="restaurant" id="restaurant" onfocus="loadRestaurants();" onchange="loadMenu();"></select>
          </div>
        </div>
        <hr>
        <div class="row">
          <table id="foodtable" class="table">
            <thead>
              <!-- 添加表头提升可读性 -->
              <tr>
                <th>ID</th>
                <th>菜品名称</th>
                <th>描述</th>
                <th>库存状态</th>
                <th>是否素食</th>
                <th>分类</th>
                <th>菜系</th>
                <th>图片</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="fooditems">
            </tbody>
          </table>
        </div>
      </form>
    </div>
  </div>
  <div class="footer"></div>
</body>

</html>

额外说明 #

• 若你的菜品数据中关联餐厅的字段不是restaurantId，请调整loadMenu()中的筛选条件字段名
• 新增的表头和默认提示选项用于提升用户体验
• 将布尔值转为友好文本，增强表格可读性

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