使用jQuery根据菜单下拉选项更新价格

时间:2018-05-23 22:13:36

标签: jquery html

我有一个无法更改的硬编码表单,但我需要为所选的选项分配价格值,并将它们添加到基本价格中。我已经用笔记创建了一个codepen,我很感激任何人都可以提供帮助。我想我很接近,但它仍然没有用。

https://codepen.io/ophello/pen/ZoNWrB

<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() {

    var dd1 = dropdown1[($("#dropdown1")[0].selectedIndex)];
    var dd2 = dropdown2[($("#dropdown2")[0].selectedIndex)];

    $("#result").html(1350 + dd1 + dd2);
  }

  $("select").on("change", updatePrice); 
});

0 个答案:

没有答案