动态生成授权平台和期限选择列表及价格显示
本文介绍如何根据后端返回的树形结构数据，动态生成授权平台和期限选择列表，并实时显示对应价格。我们将使用原生javascript实现，并提供vue.js实现的思路。
数据结构:
后端返回的数据结构如下，这是一个树形结构，包含授权平台和对应的期限选项以及价格信息：
[ { "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元" } ] }, // ...其他平台数据]
原生JavaScript实现:
const priceList = [ // ... 后端返回的JSON数据 ...];const platSelect = document.querySelector(".au_plat select"); // 假设已存在元素const perSelect = document.querySelector(".au_per 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(); // 初始化价格
HTML结构: 确保你的HTML中包含以下结构，以便JavaScript代码能够正确地操作DOM元素。
￥0.01
授权平台：
授权期限：
Vue.js实现思路:
使用Vue.js可以更简洁地实现，可以使用v-for指令遍历数据，v-model指令绑定选择的值，计算属性计算价格。
这个原生JS实现提供了一个基本的框架，你可以根据你的具体需求进行修改和扩展，例如添加错误处理、加载动画等。 记住将priceList替换成你的实际后端数据。 Vue.js实现则更适合大型项目，因为它提供了更强大的数据管理和组件化能力。
以上就是如何根据后端返回的树形结构数据，动态生成授权平台和期限选择列表并显示对应价格？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561197.html
微信扫一扫 
支付宝扫一扫 
