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

<code class="json">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元"
      }
    ]
  },
  // ...更多平台数据
]</code>

<code class="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();</code>

<code class="html"><select id="platformSelect"></select>
<select id="periodSelect"></select>
<p>价格: <span id="priceDisplay"></span></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2007">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6cf21129f9332.png" alt="无阶未来模型擂台/AI 应用平台">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2007">无阶未来模型擂台/AI 应用平台</a>
                            <p>无阶未来模型擂台/AI 应用平台，一站式模型+应用平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="无阶未来模型擂台/AI 应用平台">
                                <span>35</span>
                            </div>
                        </div>
                        <a href="/ai/2007" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="无阶未来模型擂台/AI 应用平台">
                        </a>
                    </div>
                </code>

<code class="vue"><template>
  <div>
    <select v-model="selectedPlatform" @change="updateOptions">
      <option v-for="platform in priceList" :key="platform.platform" :value="platform.platform">{{ platform.title }}</option>
    </select>
    <select v-model="selectedPeriod" @change="updatePrice">
      <option v-for="period in periodOptions" :key="period.address" :value="period.address">{{ period.address_title }}</option>
    </select>
    <p>价格: {{ price }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      priceList: [ /* ... 上述JSON数据 ... */ ],
      selectedPlatform: null,
      selectedPeriod: null,
      price: '',
      periodOptions: []
    };
  },
  computed: {
    platformData() {
      return this.priceList.find(p => p.platform === this.selectedPlatform);
    }
  },
  methods: {
    updateOptions() {
      this.periodOptions = this.platformData ? this.platformData.children : [];
      this.updatePrice();
    },
    updatePrice() {
      const periodData = this.periodOptions.find(p => p.address === this.selectedPeriod);
      this.price = periodData ? periodData.show_title : '';
    }
  },
  mounted() {
    if (this.priceList.length > 0) {
      this.selectedPlatform = this.priceList[0].platform;
      this.updateOptions();
    }
  }
};
</script></code>