如何從選擇字段中計算值？

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)
});