JS提取下拉框选项价格数值失败求助：无法获取$后的数字5

你的代码存在几个明显错误，导致无法正常运行：

• 错误操作DOM元素而非其值：第一行var ext_st = document.getElementById("catxs1");把下拉框DOM元素赋值给了ext_st，但indexOf是字符串专属方法，DOM元素没有这个方法，直接调用会触发错误，导致代码终止执行。
• 使用未定义变量str：第三行里的str从未声明或赋值，JS会抛出引用错误，这是代码无响应的核心原因。
• 字符串截取逻辑不完整：就算拿到正确的字符串，substring(indexOf("$"))会得到$5，仍包含$符号，无法直接转成有效数字。
• 变量逻辑混乱：ext_val提前用parseInt处理了完整的选项值（比如BBQ|$5），此时parseInt会返回NaN（因为字符串开头不是数字），完全起不到作用。

修正后的代码方案 #

方案1：字符串截取法

// 先获取下拉框的选中值
var selectValue = document.getElementById("catxs1").value;
// 找到$的位置，截取后面的部分并转成数字
var price = parseInt(selectValue.substring(selectValue.indexOf("$") + 1));
// 此时price就是5，可直接用于总价累加

方案2：正则匹配法（更稳妥，适配多种格式）

如果后续选项格式有变化，正则匹配的容错性更强：

var selectValue = document.getElementById("catxs1").value;
// 匹配$后面的数字部分
var priceMatch = selectValue.match(/\$(\d+)/);
// 匹配到就取数字，没匹配到默认0（避免出现NaN）
var price = priceMatch ? parseInt(priceMatch[1]) : 0;

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