使用javascript动态展示基于树形数据的授权平台、期限并计算价格
本文介绍如何利用JavaScript处理后台返回的树形数据，动态生成授权平台和期限选择列表，并根据用户选择实时计算最终价格。
数据结构
假设后台返回的数据结构如下：这是一个嵌套数组，每个元素代表一个授权平台，平台对象内包含多个期限对象。
-
平台对象属性：
-
title: 平台名称 (字符串) -
children: 期限对象数组
-
-
期限对象属性：
-
id: 期限ID (数字) -
platform: 所属平台ID (数字) -
platform_title: 所属平台名称 (字符串) -
years: 授权期限(年) (数字) -
price: 授权价格 (数字) -
address: 授权地址 (数字，例如：0-不限，1-一年，2-五年) -
address_title: 授权地址名称 (字符串) -
show_title: 显示价格 (字符串，例如 "￥100")
-
实现步骤
1. HTML结构:
创建一个基本的HTML结构用于显示授权平台、期限和价格：
2. JavaScript代码:
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元素的低效做法，提高了代码的可读性和可维护性。
