根据选择选项更新文本，再加上票价

Question

I'm making a bookings page for a cinema and would like people to be able to select the amount of any given ticket and have the subtotal HTML text updated based off the amount of tickets chosen multiplied by the price of the ticket.

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>

Here are the ticket prices (screenshot from my webpage) What jQuery would i need to achieve this? Note the exceptions for ticket prices

Answer 1

Honestly, this type of question is not really suited to SO. When a person comes here for help, we generally expect that they have made a reasonable attempt to write the code themselves but have run into a specific problem that they were unable to solve.

We also expect the asker to show the actual code they are having the issue with and to be able to articulate what the expected outcome of their code is as well as describe how their current attempt fails to meet the expectation.

With that said, I needed a break tonight so please see the below, it should do exactly what you need. Look through the code and if you have any questions about how something works, do feel free to ask:

$('.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>

</div>