基于关闭选择选项更新文本，乘以票价

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>