如何根据后端返回的树形结构数据，动态生成授权平台和期限选择列表并显示对应价格？

动态生成授权平台和期限选择列表及价格显示

本文介绍如何根据后端返回的树形结构数据，动态生成授权平台和期限选择列表，并实时显示对应价格。我们将使用原生javascript实现，并提供vue.js实现的思路。

数据结构:

后端返回的数据结构如下，这是一个树形结构，包含授权平台和对应的期限选项以及价格信息：

[
  {
    "title": "哔哩哔哩",
    "children": [
      {
        "id": 1,
        "platform": 1,
        "platform_title": "哔哩哔哩",
        "years": 0,
        "price": 0.01,
        "address": 1,
        "address_title": "一年",
        "show_title": "¥0.4元"
      },
      {
        "id": 19,
        "platform": 1,
        "platform_title": "哔哩哔哩",
        "years": 1,
        "price": 0.01,
        "address": 0,
        "address_title": "不限",
        "show_title": "¥1元"
      }
    ]
  },
  // ...其他平台数据
]

原生JavaScript实现:

const priceList = [
  // ... 后端返回的JSON数据 ...
];

const platSelect = document.querySelector(".au_plat select"); // 假设已存在元素
const perSelect = document.querySelector(".au_per select");   // 假设已存在元素
const priceEle = document.querySelector(".price");

let activePlatform;
let activeItem = priceList[0].children[0]; // 默认选中第一个选项

const renderPlatforms = (data) => {
  data.forEach(item => {
    const option = document.createElement('option');
    option.value = item.title;
    option.text = item.title;
    platSelect.appendChild(option);
  });

  platSelect.addEventListener('change', (e) => {
    const selectedPlatform = priceList.find(item => item.title === e.target.value);
    activePlatform = selectedPlatform;
    renderPeriods(selectedPlatform.children);
  });
};


const renderPeriods = (data) => {
  perSelect.innerHTML = ''; // 清空之前的选项
  data.forEach(item => {
    const option = document.createElement('option');
    option.value = item.id;
    option.text = item.address_title;
    perSelect.appendChild(option);
  });

  perSelect.addEventListener('change', (e) => {
    activeItem = data.find(item => item.id === parseInt(e.target.value, 10));
    updatePrice();
  });
};

const updatePrice = () => {
  priceEle.textContent = activeItem.show_title;
};

renderPlatforms(priceList);
updatePrice(); // 初始化价格

HTML结构: 确保你的HTML中包含以下结构，以便JavaScript代码能够正确地操作DOM元素。

千音漫语

全能AI配音神器

下载

￥0.01

  
授权平台：
   

  
授权期限：
   

Vue.js实现思路:

使用Vue.js可以更简洁地实现，可以使用v-for指令遍历数据，v-model指令绑定选择的值，计算属性计算价格。

这个原生JS实现提供了一个基本的框架，你可以根据你的具体需求进行修改和扩展，例如添加错误处理、加载动画等。 记住将priceList替换成你的实际后端数据。 Vue.js实现则更适合大型项目，因为它提供了更强大的数据管理和组件化能力。