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 に答える