根据 select 选项更新文本，乘以票价

Question

我正在制作电影院的预订页面，希望人们能够 select 任何给定门票的金额，并根据金额更新小计 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 
       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>

根据 select 选项更新文本，乘以票价

Update text based off select option, multiplied by ticket price

php

jquery

html

drop-down-menu

html-select