使用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元素的低效做法，提高了代码的可读性和可维护性。
以上就是如何用JS动态展示基于树形数据的授权平台和期限，并计算价格？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561202.html
微信扫一扫 
支付宝扫一扫 
