Combine Select Option prices into one price HTML, PHP and JQuery-CodePudding

I've gotten so far with my tennis entry form. I'm stuck on an item I'm trying to resolve.
I can get individual prices for each drop-down box but I wouldn't mind adding them all together when selected.

<form action="index.php"> 
            Select Pennants Competition: 
            <select name="Pennants_Selection" id="select_game" required>
            <option value="">Drop the Menus to select</option> #Don't Edit this line 
            <option data-price='$70' value="Saturday 4p Team Mens">Saturday 4p Team Mens</option>
            <option data-price='$70' value="Saturday 4p Team Womens">Saturday 4p Team Womens</option>
            <option data-price='$90' value="Monday Night Fast4 3P Team Mens">Monday Night Fast4 3p Team</option>
            <option data-price='$90' value="Tues Twilight 3P Ladies">Tues Twilight 3P (singles/doubles)Ladies</option>
            <option data-price='$70' value="Wednesday AM Doubles Ladies">Wednesday AM Doubles Ladies</option>
            <option data-price='$90' value="Thursday Night Doubles 8s 4P Ladies">Thursday Night Doubles 8s 4P Ladies</option>
            <option data-price='$43' value="Saturday Mixed Doubles">Saturday Mixed Doubles</option>
            <option data-price='$73' value="Wednesday Night Doubles Mens">Wednesday Night Doubles Mens</option>
            <option data-price='$90' value="Wednesday Night 8s Doubles Mens">Wednesday Night 8s Doubles Mens</option>
            <input id="game_price" name="game_price" value="" type="box">
        </select>   
<br>
        <form action="index.php">
            Select Pennants Competition: 
            <select name="Pennants_Second_Option" id="select_game1">
            <option value="Not Selected">Optional, If you want to play another comp</option> 
            <option data-price1='$70' value="Saturday 4p Team Mens">Saturday 4p Team Mens</option>
            <option data-price1='$70' value="Saturday 4p Team Womens">Saturday 4p Team Womens</option>
            <option data-price1='$90' value="Monday Night Fast4 3P Team Mens">Monday Night Fast4 3p Team</option>
            <option data-price1='$90' value="Tues Twilight 3P Ladies">Tues Twilight 3P (singles/doubles)Ladies</option>
            <option data-price1='$70' value="Wednesday AM Doubles Ladies">Wednesday AM Doubles Ladies</option>
            <option data-price1='$90' value="Thursday Night Doubles 8s 4P Ladies">Thursday Night Doubles 8s 4P Ladies</option>
            <option data-price1='$73' value="Saturday Mixed Doubles">Saturday Mixed Doubles</option>
            <option data-price1='$73' value="Wednesday Night Doubles Mens">Wednesday Night Doubles Mens</option>
            <option data-price1='$90' value="Wednesday Night 8s Doubles Mens">Wednesday Night 8s Doubles Mens</option>
            <input id="game_price1" name="game_price1" value="" type="box">
        </select>
<br>                 
        <form action="index.php">
        Select Pennants Competition: 
            <select name="Pennants_Third_Option" id="select_game2"> 
            <option value="Not Selected">Optional, If you want to play another comp</option> #Don't Edit this line
            <option data-price2='$70' value="Saturday 4p Team Mens">Saturday 4p Team Mens</option>
            <option data-price2='$70' value="Saturday 4p Team Womens">Saturday 4p Team Womens</option>
            <option data-price2='$90' value="Monday Night Fast4 3P Team Mens">Monday Night Fast4 3p Team</option>
            <option data-price2='$90' value="Tues Twilight 3P Ladies">Tues Twilight 3P (singles/doubles)Ladies</option>
            <option data-price2='$70' value="Wednesday AM Doubles Ladies">Wednesday AM Doubles Ladies</option>
            <option data-price2='$90' value="Thursday Night Doubles 8s 4P Ladies">Thursday Night Doubles 8s 4P Ladies</option>
            <option data-price2='$73' value="Saturday Mixed Doubles">Saturday Mixed Doubles</option>
            <option data-price2='$90' value="Wednesday Night Doubles Mens">Wednesday Night Doubles Mens</option>
            <option data-price2='$90' value="Wednesday Night 8s Doubles Mens">Wednesday Night 8s Doubles Mens</option>
            <input id="game_price2" name="game_price2" value="" type="box">     
        </select>
                    
<script>    
             $("#select_game").change(function(){     
             var total = 0;
            var $selectedOptions = $(this).find('option:selected');
             $selectedOptions.each(function(){
            total  = $(this).attr("data-price data-price1 data-price2");
             });
             // Split up the selected string with $ tokens, and summarize each value with a cast to int, using parseInt()
             var totalInt = 0;                                                        
             var sumArr = total.split("$");
             sumArr.forEach(x => {
            totalInt  = parseInt(x);            
                        
            });
             $("#game_price2").val(totalInt);
            });

 </script>

What i'm trying to get as an outcome one single price for the 3 options. So when i select the first option it will specify for example $70 and then option 2 will modify the that first $70 to show $140 etc.

I appreciate the help
Thanks
Daniel

CodePudding user response：

To calculate the total price based on the selections made in three different dropdowns and display the result in a separate input field try this jQuery

$(document).ready(function() {
        $("select").change(function() {
            var total = 0;
            $("select").each(function() {
                var selectedOption = $(this).find(":selected");
                var price = selectedOption.data("price");
                total  = price ? parseFloat(price.substring(1)) : 0;
            });
            $("#game_price").val("$"   total.toFixed(2));
        });
    });