0

我想创建一个表，其中动态值根据用户选择的值显示在列中。下面是我的代码。所以基本上，根据选择的成人人数和儿童人数，将计算价格。因此，如果有人选择 1 位成人和 0 位儿童，则 2 日票的金额应为 235 美元，3 日票的金额应为 301 美元，依此类推。我希望在选择框的选择更改方法上完成此操作。我对 JQuery 也不是很熟悉。我如何使用 JQuery 来完成这个？

Ages 10+:


<select id="Adult" name="Adult">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>



Ages 3-9:

<select id="Child" name="Child">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>

<table width="800" border="1" align="center">
  <tr>
    <td width="224">Product</td>
    <td width="246">Ages 10+</td>
    <td width="192">Ages 3-9</td>
    <td width="110">Price</td>
  </tr>
  <tr>
    <td>2 Day Ticket</td>
    <td>$235.00</td>
    <td>$223.00</td>
    <td>$<span class="amount"></span> </td>
  </tr>
  <tr>
    <td>3 Day Ticket</td>
    <td>$301.00</td>
    <td>$285.00</td>
    <td>$<span class="amount"></span></td>
  </tr>
  <tr>
    <td>4 Day Ticket</td>
    <td>$315.00</td>
    <td>$298.00</td>
    <td>$<span class="amount"></span></td>
  </tr>
  <tr>
    <td>5 Day Ticket</td>
    <td>$328.00</td>
    <td>$309.00</td>
    <td>$<span class="amount"></span></td>
  </tr>
</table>
4

1 回答 1

3

这是完成您要执行的操作的完整代码。我在总数中添加了一些 id。有关工作示例，请参见小提琴。最好不要对这些值进行硬编码，但这可以作为一个起点。

var numAdult = 0;
var numChild = 0;

$("#Adult").change( function(){
    numAdult = $("#Adult").val();
    calcTotals();
});
$("#Child").change( function() {
    numChild = $("#Child").val();
    calcTotals();
});

function calcTotals(){
    $("#2DayTotal").text(235*numAdult + 223*numChild);
    $("#3DayTotal").text(301*numAdult + 285*numChild);
    $("#4DayTotal").text(315*numAdult + 298*numChild);
    $("#5DayTotal").text(328*numAdult + 309*numChild);
}
于 2012-10-31T18:45:35.753 回答