js 遍历树形数据，动态展示平台和期限数据
要实现上述需求，可以使用 JS 遍历后台返回的树形数据，动态生成 DOM 元素来展示平台和期限选项。
// 遍历后台数据function generateOptions(data) { for (const platform of data) { // 创建平台选择项 const platformOption = document.createElement('option'); platformOption.value = platform.title; platformOption.innerHTML = platform.title; // 为期限选择项添加事件监听器 platformOption.addEventListener('change', e => { togglePeriodOptions(e.target.value, true); }); // 向授权平台下拉菜单中添加平台选择项 document.querySelector('.select.au_plat').appendChild(platformOption); // 为每个平台下的期限生成选项 for (const period of platform.children) { generatePeriodOption(period, platform.title); } } // 首次加载时显示第一个平台的期限选项 togglePeriodOptions(data[0].title, false);}// 生成期限选择项function generatePeriodOption(period, platform) { const periodOption = document.createElement('option'); periodOption.value = period.id; periodOption.innerHTML = `${period.show_title}`; // 为授权期限下拉菜单中添加期限选择项 document.querySelector('.select.au_per').appendChild(periodOption); // 为期限选择项添加事件监听器 periodOption.addEventListener('change', e => { updatePrice(platform, e.target.value); });}// 根据选择的平台和期限更新价格显示function updatePrice(platform, periodId) { const price = data.find(p => p.title === platform) .children .find(c => c.id === Number(periodId)) .price; document.querySelector('.price').innerHTML = `￥${price}`;}// 切换期限选择项的显示function togglePeriodOptions(platform, firstLoad) { // 获取平台下的期限选择项 const periodOptions = document.querySelectorAll('.select.au_per option'); // 隐藏所有期限选择项 periodOptions.forEach(option => { option.style.display = 'none'; }); // 根据选定的平台显示对应的期限选择项 const periods = data.find(d => d.title === platform)?.children; if (periods) { periods.forEach(period => { periodOptions.forEach(option => { if (option.value === period.id.toString()) { option.style.display = 'block'; } }); }); // 首次加载时选中第一个期限 if (firstLoad) { const firstPeriod = periods[0]; updatePrice(platform, firstPeriod.id); document.querySelectorAll('.select.au_per option')[firstPeriod.id - 1].selected = true; } }}window.onload = () => { // 调用函数遍历后台数据 generateOptions(price_list);};
在给定的 HTML 元素中，直接使用该 JavaScript 代码，即可实现树形数据遍历，动态展示平台和期限选项，以及根据用户选择更新价格显示的功能。
以上就是如何用JS动态展示树形结构的平台和期限数据并更新价格？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1561196.html
微信扫一扫 
支付宝扫一扫 
