使用jQuery根据下拉菜单选择更新价格的问题求助

安全阿岳

2026-5-28

解决硬编码表单下拉选项价格累加问题

我明白你的困扰啦——没法修改硬编码的表单，却要给选中的下拉选项分配价格，再和基础价1350相加，现在代码接近实现但跑不起来。咱们来快速定位问题并解决它！

问题根源

你的jQuery代码里用了$("#dropdown1")和$("#dropdown2")来获取下拉框，但你的HTML里的<select>标签只有name属性，并没有设置id，这就导致选择器找不到对应的元素，自然没法获取选中索引来计算价格啦。

解决方案（无需修改HTML）

既然不能改表单的HTML，那我们就通过name属性选择器来定位下拉框元素，替换掉原来的id选择器。下面是修正后的完整代码：

HTML（保持原代码不变）

<form> 
<select name="dropdown1"> 
<option value="Option1">Option 1</option> 
<option value="Option2">Option 2</option> 
<option value="Option3">Option 3</option> 
<option value="Option4">Option 4</option> 
<option value="Option5">Option 5</option> 
<option value="Option6">Option 6</option> 
</select> 
<br><br> 
<select name="dropdown2"> 
<option value="OtherOption1">Other Option 1</option> 
<option value="OtherOption2">Other Option 2</option> 
<option value="OtherOption3">Other Option 3</option> 
</select> 
</form> 
<br>Total Price<br> 
$<span id="result">1350</span>

修正后的jQuery代码

$(document).ready(function() { 
  var dropdown1 = [0,70,250,404,474,450]; 
  var dropdown2 = [0,80,160]; 
  
  function updatePrice() { 
    // 用name属性选择器替换id选择器
    var dd1 = dropdown1[$("select[name='dropdown1']")[0].selectedIndex]; 
    var dd2 = dropdown2[$("select[name='dropdown2']")[0].selectedIndex]; 
    $("#result").html(1350 + dd1 + dd2); 
  } 
  
  $("select").on("change", updatePrice); 
});