基於關閉選擇選項更新文本，乘以票價

Question

我正在爲電影製作預訂頁面，並希望人們能夠選擇任何給定票據的數量並根據金額更新小計HTML文本所選擇的門票乘以門票價格。

HTML

<table id="tickets"> 
     <tr> 
      <th class="first_column">Ticket Type</th> 
      <th class="quantity_select">Quantity</th> 
      <th class="column">Subtotal Price</th> 
     </tr> 
     <tr> 
      <td class="first_column" name="SA">Adult</td> 
      <td><select class="quantity_select"> 
       <option value="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> 
       <option value="10">10</option> 
       </select> 
      </td> 
      <td id="subtotal">$xx.xx</td> 
     </tr> 
     <tr> 
      <td class="first_column" name="SP">Concession</td> 
      <td><select class="quantity_select"> 
       <option value="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> 
              <option value="10">10</option> 
             </select></td> 
            <td>$xx.xx</td> 
           </tr> 

           <tr> 
            <td class="first_column" name="SC">Child</td> 
            <td><select class="quantity_select"> 
              <option value="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> 
              <option value="10">10</option> 
             </select></td> 
            <td>$xx.xx</td> 
           </tr> 
           <tr> 
            <td class="first_column" name="FA">First Class Adult</td> 
            <td><select class="quantity_select"> 
              <option value="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> 
              <option value="10">10</option> 
             </select></td> 
            <td>$xx.xx</td> 
           </tr> 
           <tr> 
            <td class="first_column" name="FC">First Class Child</td> 
            <td><select class="quantity_select"> 
              <option value="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> 
              <option value="10">10</option> 
             </select></td> 
            <td>$xx.xx</td> 
           </tr> 
           <tr> 
            <td class="first_column" name="B1">Beanbag - 1 Person</td> 
            <td><select class="quantity_select"> 
              <option value="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> 
              <option value="10">10</option> 
             </select></td> 
            <td>$xx.xx</td> 
           </tr> 
           <tr> 
            <td class="first_column" name="B2">Beanbag - 2 People</td> 
            <td><select class="quantity_select"> 
              <option value="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> 
              <option value="10">10</option> 
             </select></td> 
            <td>$xx.xx</td> 
           </tr> 
           <tr> 
            <td class="first_column" name="B3">Beanbag - 3 Children</td> 
            <td><select class="quantity_select"> 
              <option value="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> 
              <option value="10">10</option> 
             </select></td> 
            <td>$xx.xx</td> 
           </tr> 
           <tr> 
            <td id="total price">Total Price: </td> 
            <td id="line_total">$xx.xx</td> 
           </tr> 

這裏是機票價格（截圖來自我的網頁） jQuery的將我需要做到這一點呢？請注意票價的例外情況

Answer 1

老實說，這類問題並不適用於SO。當一個人來這裏尋求幫助時，我們通常期望他們已經合理地嘗試自己編寫代碼，但遇到了他們無法解決的特定問題。

我們也期待提問者展示他們遇到的問題的實際代碼，並能夠闡明他們代碼的預期結果，並描述他們當前的嘗試如何達不到預期。有了這個說法，我今晚需要休息一下，所以請看下面的內容，它應該完全符合你的需求。通過看代碼，如果你有什麼事是如何工作的任何問題，請隨時問：

$('.update-cost').change(function(){ 
 
    
 
    // define come data to work with 
 
    var discountedDays = ['Mon','Tues']; // remember to update this if your values are different 
 
    var discountedTimes = ['1 pm']; // remember to update this if your values are different 
 
    var totalCost = 0; 
 
    var costType='regular'; 
 
    var priceList={ 
 
        adult:{ regular : '18.00', discounted: '12.00' }, 
 
      consession:{ regular : '15.00', discounted: '10.00' }, 
 
        child:{ regular : '12.00', discounted: '8.00' }, 
 
     firstClassAdult:{ regular : '30.00', discounted: '25.00' }, 
 
     firstClassChild:{ regular : '25.00', discounted: '20.00' }, 
 
       beanbag:{ regular : '18.00', discounted: '12.00' } 
 
    }; 
 
    
 
    // get day and time 
 
    var day= $('#session-day').val(); 
 
    var time= $('#session-time').val(); 
 
    
 
    // check if discount applies 
 
    if($.inArray(day,discountedDays)!=-1 || $.inArray(time,discountedTimes)!=-1){ 
 
     costType='discounted'; 
 
    } 
 

 
    // loop through each row subtotal 
 
    $('.subtotal').each(function(i,e){ 
 
     var $select = $(e).closest('tr').find('[data-purchase-type]'); 
 
     var purchaseType = $select.data('purchase-type'); 
 
     var quantity = $select.val(); 
 
     var purchasePrice = parseFloat(priceList[purchaseType][costType]) * 1000; // if you're currious why this math seems unnecessarily complex, see http://stackoverflow.com/questions/588004/is-floating-point-math-broken 
 
     var purchaseTotal = quantity * purchasePrice; 
 
     $(e).text('$'+(purchaseTotal/1000).toFixed('2')); 
 
     totalCost = totalCost + purchaseTotal;  
 
    }); 
 
    
 
    // set grand total 
 
    $('#total_price').text('$'+(totalCost/1000).toFixed('2')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="session-day" class="update-cost"> 
 
    <option value="Mon">Mon</option> 
 
    <option value="Tues">Tues</option> 
 
    <option value="Wed">Wed</option> 
 
    <option value="Thur">Thur</option> 
 
    <option value="Fri">Fri</option> 
 
    <option value="Sat">Sat</option> 
 
    <option value="Sun">Sun</option> 
 
</select> 
 
<select id="session-time" class="update-cost"> 
 
    <option value="11 am">11 am</option> 
 
    <option value="12 pm">12 pm</option> 
 
    <option value="1 pm">1 pm</option> 
 
    <option value="2 pm">2 pm</option> 
 
    <option value="3 pm">3 pm</option> 
 
    <option value="4 pm">4 pm</option> 
 
    <option value="5 pm">5 pm</option> 
 
</select> 
 
<table id="tickets"> 
 
    <tr> 
 
     <th class="first_column">Ticket Type</th> 
 
     <th class="quantity_select">Quantity</th> 
 
     <th class="column">Subtotal Price</th> 
 
    </tr> 
 
    <tr> 
 
     <td class="first_column" name="SA">Adult</td> 
 
     <td> 
 
      <select class="quantity_select update-cost" data-purchase-type="adult"> 
 
       <option value="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> 
 
       <option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td class="subtotal">$xx.xx</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="first_column" name="SP">Concession</td> 
 
     <td> 
 
      <select class="quantity_select update-cost" data-purchase-type="consession"> 
 
       <option value="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> 
 
       <option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td class="subtotal">$xx.xx</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="first_column" name="SC">Child</td> 
 
     <td> 
 
      <select class="quantity_select update-cost" data-purchase-type="child"> 
 
       <option value="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> 
 
       <option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td class="subtotal">$xx.xx</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="first_column" name="FA">First Class Adult</td> 
 
     <td> 
 
      <select class="quantity_select update-cost" data-purchase-type="firstClassAdult"> 
 
       <option value="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> 
 
       <option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td class="subtotal">$xx.xx</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="first_column" name="FC">First Class Child</td> 
 
     <td> 
 
      <select class="quantity_select update-cost" data-purchase-type="firstClassChild"> 
 
       <option value="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> 
 
       <option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td class="subtotal">$xx.xx</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="first_column" name="B1">Beanbag - 1 Person</td> 
 
     <td> 
 
      <select class="quantity_select update-cost" data-purchase-type="beanbag"> 
 
       <option value="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> 
 
       <option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td class="subtotal">$xx.xx</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="first_column" name="B2">Beanbag - 2 People</td> 
 
     <td> 
 
      <select class="quantity_select update-cost" data-purchase-type="beanbag"> 
 
       <option value="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> 
 
       <option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td class="subtotal">$xx.xx</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="first_column" name="B3">Beanbag - 3 Children</td> 
 
     <td> 
 
      <select class="quantity_select update-cost" data-purchase-type="beanbag"> 
 
       <option value="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> 
 
       <option value="10">10</option> 
 
      </select> 
 
     </td> 
 
     <td class="subtotal">$xx.xx</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Total Price:</td> 
 
     <td id="total_price">$xx.xx</td> 
 
    </tr>