php中的jquery更改表单按钮值

我有一个有两个下拉列表的表单，“Type”和“Level”，例如

Type
-----
Hotel
Restaurant
Casino

Level
-----
1
2
3

还有一个提交按钮，根据下拉列表中选择的选项显示价格。价格是通过一些基本的数学计算出来的

如何使用jquery实现这一点

它是使用onchange（）还是什么

$("#button_id_here").val("$your_amount_here");

如果要自动更新，请将其绑定到选择/下拉列表中的

change

事件

$("#select_id_here").change(function(){
    //"basic maths"
    $("#button_id_here").val("$your_amount_here");
});

如果需要更多帮助，我们需要查看代码。

HTML:

<form>
    <fieldset>
        <p>
            <label for="selectType">Type:</label>
            <select id="selectType" name="type">
                <option value="Hotel" data-cost="40">Hotel</option>
                <option value="Restaurant" data-cost="80">Restaurant</option>
                <option value="Casino" data-cost="35">Casino</option>
            </select>
        </p>

        <p>
            <label for="selectLevel">Level:</label>
            <select id="selectLevel" name="level">
                <option value="1" data-cost="0">1</option>
                <option value="2" data-cost="15">2</option>
                <option value="3" data-cost="30">3</option>
            </select>
        </p>

        <p>
            Total Cost: $<span id="cost">0</span>
        </p>

        <p><input type="submit" value="Go!"></p>
    </fieldset>
</form>

---

您可能还需要为级别设置类似“数据乘数”的内容。。。而2级可能有1.5倍的乘数，3级可能有2倍的乘数。您还必须相应地调整jQuery（

total=typeCost*levelCostMultiplier，例如）。
您可以通过jQuery的（）函数检查选择列表是否已更改

以下是一种方法：

HTML:

以及相关的JSFIDLE：

$(function() {
    $("#selectType, #selectLevel").change(function() {
      var type = $("#selectType"),
          level = $("#selectLevel"),
          cost  = $("#cost"),
          typeCost = type.find(":selected").data('cost'),
          levelCost = level.find(":selected").data('cost'),
          total = typeCost + levelCost;

      cost.html(total);
    }).change();  // invoke the .change() trigger
});

Type
<select name="type" id="type">
    <option value="hotel" selected>Hotel</option>
    <option value="restaurant">Restaurant</option>
    <option value="casino">Casino</option>
</select>Level
<select name="level" id="level">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="result"></div>

var result = 1;
$("#type").change(function () {
    var val = $(this).val();
    $("#result").html("Type is " + val + ", level is " + $("#level").val());
});

$("#level").change(function () {
    var val = $(this).val();

    // Some basic math
    result = parseInt(val) * 5;

    $("#result").html("Type is " + $("#type").val() + ", level is " + val + ", result: " + result);
});