Question

我有一个包含2个下拉列表的表单，'Type'和'Level'，例如

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

See it in action here

您可能还希望为级别设置类似“数据乘数”的东西......而级别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/

jquery在php中更改表单按钮值

3 个答案: