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

[
  {
    "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元"
      }
    ]
  },
  // ...其他平台数据
]

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

const platSelect = document.querySelector(".au_plat select"); // 假设已存在<select>元素
const perSelect = document.querySelector(".au_per select");   // 假设已存在<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(); // 初始化价格

<p class="price">￥0.01</p>
<div class="au_plat">
  <p class="type">授权平台：</p>
  <select></select> </div>
<div class="au_per">
  <p class="type">授权期限：</p>
  <select></select> </div>