如何实现根据选择不同的授权平台动态显示其对应的授权期限和价格？

动态显示授权平台期限和价格

本文介绍如何根据选择的授权平台动态显示其对应的授权期限和价格。我们将使用javascript实现这一功能，并提供vue.js的示例代码。

数据结构:

我们假设后端返回的数据结构如下：

price_list: [
  {
    "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元"
      }
    ]
  },
  {
    "title": "微博",
    "children": [
      {
        "id": 17,
        "platform": 3,
        "platform_title": "微博",
        "years": 0,
        "price": 0.01,
        "address": 0,
        "address_title": "一年",
        "show_title": "¥0.2元"
      },
      {
        "id": 13,
        "platform": 3,
        "platform_title": "微博",
        "years": 0,
        "price": 0.01,
        "address": 0,
        "address_title": "五年",
        "show_title": "¥1元"
      }
    ]
  },
  // ...更多平台数据
]

JavaScript实现:

const priceList = [ /* ... 上述JSON数据 ... */ ];

const selectPlatform = document.getElementById("platformSelect");
const selectPeriod = document.getElementById("periodSelect");
const priceDisplay = document.getElementById("priceDisplay");

function updateOptions() {
  const selectedPlatform = selectPlatform.value;
  const platformData = priceList.find(p => p.platform === parseInt(selectedPlatform));

  selectPeriod.innerHTML = ''; // 清空之前的选项
  if (platformData) {
    platformData.children.forEach(period => {
      const option = document.createElement('option');
      option.value = period.address;
      option.text = period.address_title;
      selectPeriod.appendChild(option);
    });
    updatePrice();
  } else {
    priceDisplay.textContent = "请选择平台";
  }
}

function updatePrice() {
  const selectedPlatform = selectPlatform.value;
  const selectedPeriod = selectPeriod.value;
  const platformData = priceList.find(p => p.platform === parseInt(selectedPlatform));
  const periodData = platformData.children.find(p => p.address === parseInt(selectedPeriod));
  priceDisplay.textContent = periodData ? periodData.show_title : "请选择期限";
}


// 初始化平台选择框
priceList.forEach(platform => {
  const option = document.createElement('option');
  option.value = platform.platform;
  option.text = platform.title;
  selectPlatform.appendChild(option);
});

selectPlatform.addEventListener('change', updateOptions);
selectPeriod.addEventListener('change', updatePrice);

// 初始显示
updateOptions();

HTML结构 (示例):

价格: 

							

								
								

									扣子编程
									
扣子推出的AI编程开发工具
								
								下载 
							
						

Vue.js实现 (简化版):

记住替换/* ... 上述JSON数据 ... */为你的实际数据。 这两个示例都实现了根据平台选择动态更新期限选项和价格的功能。 Vue.js版本更简洁，并利用了数据绑定和响应式特性。 选择哪个版本取决于你的项目需求和技术栈。