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>

我想得到的结果是,这3种 Select 只有一个价格.所以当我 Select 第一个选项时,它将指定例如$70,然后选项2将修改第一个$70以显示$140,依此类推.

我很感激你的帮助
谢谢
丹尼尔

推荐答案

要根据在三个不同下拉列表中所做的 Select 计算总价格并在单独的输入字段中显示结果,请try 以下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));
        });
    });

Html相关问答推荐

传单自定义标记(divIcon)html/css不适用

单表单和多个提交(具有多个值)

如何找到FontAwese图标的Unicode值?

使用HTML进行DAX测量

当光标悬停在(相同)父元素上方时,为多个子元素创建不同的过渡动画

我正在try 向列表中的图像添加悬停,以放大图像并将div的不透明度设置为1而不是0

仅在过渡之前删除填充

网格项未在同一行上对齐

为什么 html 元素的 max-width 和 width 一起工作?

可以通过悬停时的自定义区域更改文本属性吗?

如何从 div 内的属性中提取 href 和文本

绝对类在另一个绝对类之上

如何只为 Navbar 中的一个元素提供动画,其余元素没有使用 css 的动画

如何将两个平行 div 的页面内的表格居中?

在 iPhone 上分隔 HTML 邮箱输入中的多个邮箱条目

如何将元素均匀分布到容器的边缘?

标签背景 colored颜色 的 html 和 css 技巧说明

使用 CSS flexbox 和溢出顶部而不是底部

如何将内容从侧边栏的底部移动到右侧?