php - jquery在php中更改表单按钮值

Question

我有一个带有 2 个下拉菜单的表单，“类型”和“级别”，例如

Type
-----
Hotel
Restaurant
Casino

Level
-----
1
2
3

还有一个提交按钮，它根据下拉菜单中选择的任何选项显示价格。价格是通过一些基本的数学计算得出的。

我怎样才能使用 jquery 做到这一点？

是使用 onchange() 还是什么？

Answer 1

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

如果您希望它自动更新，请将其绑定到change选择/下拉菜单中的事件

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

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

Answer 2

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>

jQuery：

$(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
});

在此处查看实际操作

您可能还想为关卡设置“数据乘数”之类的东西……而关卡 2 可能有 1.5 倍乘数，而关卡 3 可能有 2 倍乘数。您还必须相应地调整 jQuery（total = typeCost * levelCostMultiplier例如）。

Answer 3

您可以通过 jQuery 的change () 函数检查选择列表是否已更改。

这是一种方法：

HTML：

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>

jQuery：

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);
});

以及相关的jsfiddle：http: //jsfiddle.net/y2s4v/1/