如何用JS动态展示基于树形数据的授权平台和期限，并计算价格？

<div id="authorization">
  <p>价格：<span id="price">￥0.00</span></p>
  <div>
    <label for="platform">授权平台：</label>
    <select id="platform"></select>
  </div>
  <div>
    <label for="term">授权期限：</label>
    <select id="term"></select>
  </div>
</div>

const authorizationDiv = document.getElementById('authorization');
const priceSpan = document.getElementById('price');
const platformSelect = document.getElementById('platform');
const termSelect = document.getElementById('term');

// 模拟后台返回的树形数据
const platformData = [
  { title: "哔哩哔哩", children: [
      { id: 1, platform: 1, platform_title: "哔哩哔哩", years: 1, price: 100, address: 1, address_title: "一年", show_title: "￥100" },
      { id: 2, platform: 1, platform_title: "哔哩哔哩", years: 5, price: 400, address: 2, address_title: "五年", show_title: "￥400" }
    ]
  },
  { title: "微博", children: [
      { id: 3, platform: 2, platform_title: "微博", years: 1, price: 150, address: 1, address_title: "一年", show_title: "￥150" },
      { id: 4, platform: 2, platform_title: "微博", years: 5, price: 600, address: 2, address_title: "五年", show_title: "￥600" }
    ]
  }
  // ...更多平台数据
];


// 填充平台选择列表
platformData.forEach(platform => {
  const option = document.createElement('option');
  option.value = platform.title;
  option.text = platform.title;
  platformSelect.appendChild(option);
});

// 更新期限选择列表和价格
function updateTermSelectAndPrice() {
  const selectedPlatform = platformSelect.value;
  const platform = platformData.find(p => p.title === selectedPlatform);

  termSelect.innerHTML = ''; // 清空之前的选项

  if (platform) {
    platform.children.forEach(term => {
      const option = document.createElement('option');
      option.value = term.id;
      option.text = `${term.years}年(${term.address_title})`;
      termSelect.appendChild(option);
    });
  }

  // 设置默认价格
  priceSpan.textContent = "￥0.00";

  // 监听期限选择变化
  termSelect.addEventListener('change', () => {
    const selectedTermId = termSelect.value;
    const selectedTerm = platform.children.find(term => term.id == selectedTermId);
    priceSpan.textContent = selectedTerm ? selectedTerm.show_title : "￥0.00";
  });
}

// 监听平台选择变化
platformSelect.addEventListener('change', updateTermSelectAndPrice);

// 初始化
updateTermSelectAndPrice();