关于前端处理后端数据的问题，如何解决？

Question

后端传给我这一段json数据，让我把4个内容标题（内容1，内容2...）做一个选择下拉框，后面对应的数据再做一个下拉框，第一个框选择相应的表头，第二个的选择他们对应数据，我这cpu已经干烧了，各位能否支个招？

{
    "status": true,
    "data": {
        "内容1": {
            "id": 5,
            "编号": "69565019",
            "胡萝卜": "63917186"
        },
        "内容2": {
            "id": 6,
            "编号": "69566813",
            "辣椒油": "67252203",
            "山梨": "63917181"
        },
        "内容3": {
            "id": 7,
            "编号": "69566886",
            "山梨": "63917181",
            "辣椒油": "63982076"
        },
        "内容4": {
            "id": 8,
            "编号": "69562963",
            "胡萝卜": "63917186",
            "山梨": "63917181",
            "辣椒油": "63982076"
        }
    }
}

Answer 1

基于Monster 组和GPT的调写：
用 JavaScript 和 HTML 创建一个表单来实现这个下拉框。以下是一个示例代码，其中包含两个下拉框：一个用于选择表头，另一个用于选择相应的数据。你需要将此代码适应于你的应用程序，包括修改选项的标签和值。
HTML:

<form>
  <label for="header-select">选择表头：</label>
  <select id="header-select">
    <option value="0">请选择</option>
    <option value="1">内容1</option>
    <option value="2">内容2</option>
    <option value="3">内容3</option>
    <option value="4">内容4</option>
  </select>

  <label for="data-select">选择数据：</label>
  <select id="data-select">
    <option value="0">请选择</option>
  </select>
</form>

JS

const data = {
  "内容1": {
      "id": 5,
      "编号": "69565019",
      "胡萝卜": "63917186"
  },
  "内容2": {
      "id": 6,
      "编号": "69566813",
      "辣椒油": "67252203",
      "山梨": "63917181"
  },
  "内容3": {
      "id": 7,
      "编号": "69566886",
      "山梨": "63917181",
      "辣椒油": "63982076"
  },
  "内容4": {
      "id": 8,
      "编号": "69562963",
      "胡萝卜": "63917186",
      "山梨": "63917181",
      "辣椒油": "63982076"
  }
};

const headerSelect = document.getElementById("header-select");
const dataSelect = document.getElementById("data-select");

headerSelect.addEventListener("change", function() {
  // 清空数据下拉框
  dataSelect.innerHTML = "<option value='0'>请选择</option>";

  // 获取选定表头的数据
  const header = headerSelect.value;
  if (header !== "0") {
    const headerData = data[`内容${header}`];

    // 创建数据下拉框的选项
    for (const key in headerData) {
      if (key !== "id") {
        const option = document.createElement("option");
        option.value = headerData[key];
        option.textContent = headerData[key];
        dataSelect.appendChild(option);
      }
    }
  }
});

这段 JavaScript 代码将监听表头下拉框的更改事件。当用户选择表头时，它将清空数据下拉框并根据选定表头的数据动态地创建选项。请注意，选项的值是相应数据的值，而文本是数据本身。这意味着，如果用户选择了数据下拉框中的选项，你将能够轻松地访问所选数据的值。