Google_Coffee99 2023-02-19 18:19 采纳率: 33.3%
浏览 37
已结题

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

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

img

{
    "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"
        }
    }
}

  • 写回答

3条回答 默认 最新

  • 社区专家-Monster-XH 2023-02-19 18:31
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 2月28日
  • 已采纳回答 2月20日
  • 创建了问题 2月19日

悬赏问题

  • ¥15 快手联盟怎么快速的跑出建立模型
  • ¥20 ros环境下运行orb-slam一直报错
  • ¥15 关于腾讯云服务器中,PHP页面无法打开的问题
  • ¥60 如何把照片修复成原始拍摄图
  • ¥80 Exited too quickly (process log may have details)
  • ¥15 爬知乎登录之后内容加载不出来
  • ¥15 怎么用protues测量通频带
  • ¥15 zepelin使用sparkInterpreter 异常
  • ¥15 paho mqtt 接收不到消息
  • ¥15 函数r关于两个分量y,z方向上的图像,分开画r随y的图像,r随z的图像