如何从选择字段中计算值？

Question

I took the example from here http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/ , Demo 4

Everything works fine, however I can not figure out how to calculate the sum from select list values and to withdraw at the end of the page. I try to do it with this code but it not work `

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

`

Thank you in advance !

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

Summation is not being made as you expect because your total variable is reset to 0 every time the event listener is fired. Thus your code will work if you define that variable as global.

Thus what you want is:

var total = 0;

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