基于索引定位特定值：jQuery获取下拉选中项关联价格

我来帮你搞定这个问题！你已经能从JSON填充下拉框了，接下来获取选中项的价格其实很简单，核心就是把价格和下拉选项绑定起来，下面给你两种实用的实现方式：

方法一：填充下拉时通过data-*属性存储价格 #

这种方法最直观，在生成<option>元素的时候，直接把价格存在自定义的data-price属性里，后续选中时直接读取即可。

步骤1：假设你的JSON数据结构（参考示例） #

// 你的JSON数据大概长这样，包含显示文本、选项value、对应价格
const afmOptions = [
  { display: ".010 AFM", value: "afm_010", price: 29.99 },
  { display: ".020 AFM", value: "afm_020", price: 35.50 },
  { display: ".030 AFM", value: "afm_030", price: 42.00 }
];

步骤2：填充下拉框时添加data-price属性 #

// 假设你的select元素id是"afmSelect"
$.each(afmOptions, function(i, item) {
  // 生成带data-price属性的option
  const option = `<option value="${item.value}" data-price="${item.price}">${item.display}</option>`;
  $("#afmSelect").append(option);
});

步骤3：监听下拉变化，获取选中价格 #

$("#afmSelect").on("change", function() {
  // 获取选中的option元素
  const selectedOpt = $(this).find("option:selected");
  // 读取data-price并转为数字类型（方便后续计算）
  const selectedPrice = parseFloat(selectedOpt.data("price"));

  // 现在就可以把selectedPrice作为变量代入你的计算公式了
  console.log("当前选中项价格：", selectedPrice);
  // 示例计算：比如乘以购买数量得到总价
  const quantity = 3;
  const totalCost = selectedPrice * quantity;
  console.log("总价：", totalCost);
});

方法二：通过价格映射对象匹配选中值 #

如果你的下拉框已经提前填充好了，不想修改原有填充逻辑，可以先把JSON数据转成一个value-价格的映射对象，后续通过选中的value直接查找价格。

步骤1：创建价格映射对象 #

const priceMap = {};
afmOptions.forEach(item => {
  // 用option的value作为键，价格作为值
  priceMap[item.value] = item.price;
});

步骤2：监听下拉变化，通过映射获取价格 #

$("#afmSelect").on("change", function() {
  // 获取选中的option value
  const selectedValue = $(this).val();
  // 从映射对象中取出对应价格
  const selectedPrice = priceMap[selectedValue];

  // 确保价格存在再进行计算
  if (selectedPrice !== undefined) {
    console.log("当前选中价格：", selectedPrice);
    // 这里写你的计算公式逻辑
  }
});

两种方法都能完美解决你的需求，推荐第一种，因为它把价格和选项直接绑定，代码更清晰易懂。

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