Question

我从这里采取了示例http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/，演示4

一切正常，但我无法弄清楚如何从选择列表值计算总和并在页面末尾撤消。我试着用这段代码来做，但它不起作用`

<section class="main clearfix">
                <div class="fleft">
                    <select id="cd-dropdown" class="cd-select">
                        <option value="-1" selected>Choose a weather condition</option>
                        <option value="1" class="icon-sun">Sun</option>
                        <option value="2" class="icon-cloudy">Clouds</option>
                        <option value="3" class="icon-weather">Snow</option>
                        <option value="4" class="icon-rainy">Rain</option>
                        <option value="5" class="icon-windy">Windy</option>
                    </select>
                </div>
                <input type="text" id="sum">
            </section>

    $( function() {

            $( '#cd-dropdown' ).dropdown( {
                gutter : 5,
                delay : 40,
                rotated : 'left'
            } );

        });

    </script>
    <script type="text/javascript">
        $("#cd-dropdown").change(function() {
        var total = 0;
        $.each($(".cd-select") ,function() {
        total += parseInt($(this).val());
        });
            $("#sum").val(total)});

`

提前谢谢！

Answer 1

 $(document).ready(function () {
    $(".cd-select").change(function () {
        total = 0;
        $('.cd-select').each(function () {
            if ($(this).val() != "-1") {
                total = total + parseInt($(this).val(), 10);
            }
        });
        $('#sum').val(total);
    });
});


 <div class="fleft">
                <select id="cd-dropdown" class="cd-select">
                    <option value="-1" selected>Choose a weather condition</option>
                    <option value="1" class="icon-sun">Sun</option>
                    <option value="2" class="icon-cloudy">Clouds</option>
                    <option value="3" class="icon-weather">Snow</option>
                    <option value="4" class="icon-rainy">Rain</option>
                    <option value="5" class="icon-windy">Windy</option>
                </select>

                <select id="Select1" class="cd-select">
                    <option value="-1" selected>Choose a weather condition</option>
                    <option value="1" class="icon-sun">Sun</option>
                    <option value="2" class="icon-cloudy">Clouds</option>
                    <option value="3" class="icon-weather">Snow</option>
                    <option value="4" class="icon-rainy">Rain</option>
                    <option value="5" class="icon-windy">Windy</option>
                </select>
                <select id="Select2" class="cd-select">
                    <option value="-1" selected>Choose a weather condition</option>
                    <option value="1" class="icon-sun">Sun</option>
                    <option value="2" class="icon-cloudy">Clouds</option>
                    <option value="3" class="icon-weather">Snow</option>
                    <option value="4" class="icon-rainy">Rain</option>
                    <option value="5" class="icon-windy">Windy</option>
                </select>
            </div>
            <input type="text" id="sum">

 When any select with class 'cd-select' change the sum will be calculated and displayed on the text field

Answer 2

未按预期进行求和，因为每次触发事件侦听器时，total变量都会重置为0。因此，如果将该变量定义为全局变量，则代码将起作用。

因此你想要的是：

var total = 0;

$("#cd-dropdown").change(function() {
  $.each($(".cd-select"), function() {
    total += parseInt($(this).val());
  });
  $("#sum").val(total)
});

如何计算选择字段的值？

2 个答案: