如何将两个范围值相加，然后乘以一个select标记

How do I add two range values together, then multiply it by a select tag?

本文关键字：然后标记一个 select 两个范围更新时间：2023-09-26

我制作了一个简单的表格来计算地毯等的价格，我有两个范围输入字段，带有从0到100的可调滑块，还有一个带有不同价格下拉选项的选择标签，我想做的计算是(range1+range2(*selectoption，然后将总数放入文本字段total这一切都不需要单击提交，所以它可以为您提供实时计算，而无需提交页面，您对如何实现这一点有什么想法吗？

<html>
<head>
            <link rel="stylesheet" type="text/css" href="form_style.css">
            <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
            <script type="text/javascript">
                object.onchange=function output(){
                var value1 = document.getElementById("width").value;
                var value2 = document.getElementById("length").value;
                document.getElementById('total').innerHTML = parseInt(width) + parseInt(length);    
                }           
            </script>
        </head>
    <body>
        <div id="form11">
            <h1>Form</h1>
            <form method="post" action="#">
                <table id="table11">
                    <tr><td><p>Width (m):</p></td><td><input type="range" name="width" id="value1" value="0" min="0" max="100"  data-highlight="true" onchange="calc"></td></tr>
                    <tr><td><p>Length (m):</p></td><td><input type="range" name="length" id="value2" value="0" min="0" max="100" data-highlight="true" onchange="calc"></td></tr>
                    <tr><td><p>Carpet Type:</p></td><td><select name="carpettype">
                                                            <option value="6.99">Carpet1</option>
                                                            <option value="4.99">Carpet2</option>
                                                            <option value="8.99">Carpet3</option>
                                                            <option value="3.99">Carpet4</option>
                                                            <option value="5.99">Carpet5</option>
                                                        </select></td></tr>
                    <tr><td><p>Total:</p></td><td><input type="text" id="total" name="total"/></td></tr>
                    <tr><td colspan="2"><input type="submit" value="Submit"/></td></tr>

                </table>
            </form>
        </div>

    </body>

Seing，因为您正在使用jQuery:

<script type="text/javascript">
    $(document).ready(function(){
        // On any change in form.
        $("form :input").change(function() {
            // Fetch selected options.
            var value1 = $('form #value1').val();
            var value2 = $('form #value2').val();
            var selectoption = $("form select option:selected").val();
            // Output to text field.
            $('form #total').val((value1 + value2) * selectoption);
        });
    });
</script>

请参阅工作jsfiddle。