如何实现基于4个select选项的段位阶梯价格计算？

嘿，我来帮你理清这个4个select选项的价格计算逻辑！首先咱们先把规则吃透，再一步步实现。

第一步：先把各段位的价格映射理清楚 #

首先得把每个段位下5个分段的价格明确下来，比如你说的青铜（Bronze）是5→$0、4→$2、3→$4、2→$6、1→$8，其他段位逻辑完全一样，只是基础价格不同。咱们可以把这个整理成一个清晰的配置表，方便后续调用：

// 你可以根据实际需求修改各段位的价格数值
const rankPriceMap = {
  Bronze: [0, 2, 4, 6, 8], // 数组索引0对应分段5，索引4对应分段1
  Silver: [10, 12, 14, 16, 18],
  Gold: [20, 22, 24, 26, 28],
  Platinum: [30, 32, 34, 36, 38],
  Diamond: [40, 42, 44, 46, 48]
};

这里我把分段5对应数组第一个元素（索引0），分段1对应最后一个（索引4），这样后面根据分段找价格会很方便。

第二步：明确4个Select的作用（假设是起始+目标的段位/分段选择） #

我猜你的4个select应该是用来选起始段位、起始分段、目标段位、目标分段对吧？那计算逻辑分两种情况：

情况1：起始和目标是同一个段位 #

比如都是青铜，那直接算从起始分段到目标分段的价格总和就行。举个例子：从青铜4到青铜1，就是$2+$4+$6+$8=$20。

情况2：起始和目标是不同段位 #

比如从青铜2到白银3，得分三部分加起来：

1. 起始段位里，从起始分段到该段位最高分段（青铜1）的价格总和：$6+$8=$14
2. 中间所有完整段位的总价（如果有的话，比如从青铜到铂金，中间的白银、黄金要全加）
3. 目标段位里，从最低分段（白银5）到目标分段（白银3）的价格总和：$10+$12+$14=$36
   把这三部分加起来，$14+$36=$50就是总价。

第三步：代码实现（JavaScript） #

我给你写了一套可以直接用的代码，注释很清楚，你可以直接嵌入到你的页面里：

// 定义段位的高低顺序，用来判断段位之间的先后
const rankOrder = ["Bronze", "Silver", "Gold", "Platinum", "Diamond"];

// 价格配置表，上面已经解释过啦
const rankPriceMap = {
  Bronze: [0, 2, 4, 6, 8],
  Silver: [10, 12, 14, 16, 18],
  Gold: [20, 22, 24, 26, 28],
  Platinum: [30, 32, 34, 36, 38],
  Diamond: [40, 42, 44, 46, 48]
};

// 辅助函数：计算同一个段位内，两个分段之间的价格总和
function calcWithinRank(rank, startDiv, endDiv) {
  const prices = rankPriceMap[rank];
  // 把分段转成数组索引：分段5→0，分段1→4
  const startIdx = 5 - startDiv;
  const endIdx = 5 - endDiv;
  let total = 0;

  // 判断是从低分段到高分段，还是反过来，然后累加价格
  if (startIdx <= endIdx) {
    for (let i = startIdx; i <= endIdx; i++) {
      total += prices[i];
    }
  } else {
    for (let i = startIdx; i >= endIdx; i--) {
      total += prices[i];
    }
  }
  return total;
}

// 辅助函数：计算一整个段位的总价格（比如青铜5到青铜1的总价）
function calcFullRankPrice(rank) {
  return rankPriceMap[rank].reduce((sum, price) => sum + price, 0);
}

// 主函数：计算总价格
function calcTotalPrice(startRank, startDiv, targetRank, targetDiv) {
  const startRankPos = rankOrder.indexOf(startRank);
  const targetRankPos = rankOrder.indexOf(targetRank);

  // 如果是同一个段位，直接算内部总和
  if (startRankPos === targetRankPos) {
    return calcWithinRank(startRank, startDiv, targetDiv);
  }

  let total = 0;

  // 1. 加上起始段位剩余部分的价格（从起始分段到该段位最高分段）
  total += calcWithinRank(startRank, startDiv, 1);

  // 2. 加上中间所有完整段位的总价
  for (let i = startRankPos + 1; i < targetRankPos; i++) {
    total += calcFullRankPrice(rankOrder[i]);
  }

  // 3. 加上目标段位前半部分的价格（从最低分段到目标分段）
  total += calcWithinRank(targetRank, 5, targetDiv);

  return total;
}

第四步：和HTML Select结合使用 #

假设你的HTML是这样的：

<!-- 起始选择 -->
<select id="startRank">
  <option value="Bronze">Bronze</option>
  <option value="Silver">Silver</option>
  <option value="Gold">Gold</option>
  <option value="Platinum">Platinum</option>
  <option value="Diamond">Diamond</option>
</select>
<select id="startDivision">
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
</select>

<!-- 目标选择 -->
<select id="targetRank">
  <option value="Bronze">Bronze</option>
  <option value="Silver">Silver</option>
  <option value="Gold">Gold</option>
  <option value="Platinum">Platinum</option>
  <option value="Diamond">Diamond</option>
</select>
<select id="targetDivision">
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
</select>

<button onclick="showTotalPrice()">计算总价格</button>
<div id="priceResult"></div>

那你再加一个触发计算的函数，就能让用户点击按钮看到结果了：

function showTotalPrice() {
  // 获取用户选择的选项值
  const startRank = document.getElementById("startRank").value;
  const startDiv = parseInt(document.getElementById("startDivision").value);
  const targetRank = document.getElementById("targetRank").value;
  const targetDiv = parseInt(document.getElementById("targetDivision").value);

  // 计算总价格
  const totalPrice = calcTotalPrice(startRank, startDiv, targetRank, targetDiv);

  // 显示结果
  document.getElementById("priceResult").textContent = `总价格：$${totalPrice}`;
}

这样一套下来，用户选好4个选项后，点击按钮就能自动算出对应的总价格啦！

内容的提问来源于stack exchange，提问作者Ben