JS树形数据授权平台：动态展示及价格计算

本文介绍如何使用JavaScript动态生成一个授权平台和期限选择界面，并实时计算价格。通过处理后台返回的树形数据（包含平台名称、期限、价格等信息），前端页面将动态展示授权平台选项和对应期限选项。用户选择后，系统会实时计算并显示最终价格。文中详细讲解了HTML结构搭建、JavaScript代码实现，包括数据处理、DOM操作及事件监听等，并提供了模拟数据及代码示例，方便读者理解和实践，最终实现一个交互性强的授权价格计算工具。 关键词：JavaScript, 树形数据, 授权平台, 期限, 价格计算, 动态展示

使用JavaScript动态展示基于树形数据的授权平台、期限并计算价格

本文介绍如何利用JavaScript处理后台返回的树形数据，动态生成授权平台和期限选择列表，并根据用户选择实时计算最终价格。

数据结构

假设后台返回的数据结构如下：这是一个嵌套数组，每个元素代表一个授权平台，平台对象内包含多个期限对象。

• 平台对象属性：

  • title: 平台名称 (字符串)
  • children: 期限对象数组

• 期限对象属性：

  • id: 期限ID (数字)
  • platform: 所属平台ID (数字)
  • platform_title: 所属平台名称 (字符串)
  • years: 授权期限(年) (数字)
  • price: 授权价格 (数字)
  • address: 授权地址 (数字，例如：0-不限，1-一年，2-五年)
  • address_title: 授权地址名称 (字符串)
  • show_title: 显示价格 (字符串，例如 "￥100")

实现步骤

1. HTML结构:

创建一个基本的HTML结构用于显示授权平台、期限和价格：

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();

这段代码首先创建了HTML元素，然后根据模拟数据填充平台选择列表。updateTermSelectAndPrice函数根据选择的平台更新期限选择列表，并设置默认价格。最后，添加事件监听器来处理平台和期限的选择变化，并实时更新价格显示。 记得将模拟数据替换成你实际从后台获取的数据。

这个改进后的版本更清晰、易于理解和维护，并且更有效地处理了数据和用户交互。 它也避免了直接操作DOM元素的低效做法，提高了代码的可读性和可维护性。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS树形数据授权平台：动态展示及价格计算》文章吧，也可关注golang学习网公众号了解相关技术文章。