问在选择下拉菜单时更改多个Divs的值。

EN

$.getJSON("https://api.myjson.com/bins/1ooc9", function (data) {
    //code inside
    var items = data;
    var checkIds = [];
    $.each(items, function (k, v) {
        if ($.inArray(v.id, checkIds) == -1) {
            $("#category").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.chains + '</option>');
            checkIds.push(v.id);
        }
    });

    $("#category").on('change', function () {
        var dept_number = parseInt($(this).val());
        var price = $(this).find(':selected').data('price');
        var tochange = false;
        var total = 0;
        var totalSales= 0;
        var totalTrans= 0;
        $.each(items, function (k, v) {
            if (v.id == dept_number) {
                if (tochange == true) {
                    $("#category1").append('<option value="' + v.id + '" data-tran="' + v.transaction + '" data-sales="' + v.sales + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                    $("#category2").append('<option value="' + v.id + '" data-tran="' + v.transaction + '" data-sales="' + v.sales + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
                    $("#category3").append('<option value="' + v.id + '" data-tran="' + v.transaction + '" data-sales="' + v.sales + '" data-price="' + v.visitors + '">' + v.date + '</option>');
                } else {
                    $("#category1").html('<option value="' + v.id + '" data-tran="' + v.transaction + '" data-sales="' + v.sales + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                    $("#category2").html('<option value="' + v.id + '" data-tran="' + v.transaction + '" data-sales="' + v.sales + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
                    $("#category3").html('<option value="' + v.id + '" data-tran="' + v.transaction + '" data-sales="' + v.sales + '" data-price="' + v.visitors + '">' + v.date + '</option>');
                    tochange = true;
                }
                total += v.visitors;
                totalSales += v.sales;
                totalTrans += v.transaction;
            }
        });
        $('#dept-input').val(dept_number);
        $('#price-input').val(total);
        $("#totalVisitors").text(total);
        $("#totalSales").text(totalSales);
        $("#totalTransaction").text(totalTrans);
    }).change();

    $("select[id^='category']:not(#category)").on('change', function () {
        var dept_number = parseInt($(this).val());
        var price = $(this).find(':selected').data('price');
        var sales = $(this).find(':selected').data('sales');
        var transaction = $(this).find(':selected').data('tran');
        $('#dept-input').val(dept_number);
        $('#price-input').val(price);
      	$("#totalVisitors").text(price);
        $("#totalSales").text(sales);
        $("#totalTransaction").text(transaction);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category"></select>
<select id="category1"></select>
<select id="category2"></select>
<select id="category3"></select>
<br>
<br>
<div class="total"  style="width: 300px;height: 100px;background-color: #006a72;color: white;text-align: center; font-size: 18px; line-height: 45px;">TOTAL VISITORS FOR THE DAY
    <br>
        <span id="totalVisitors" ></span>
</div>
<br>
<div class="total" style="width: 300px;height: 100px;background-color: orange;color: white;text-align: center; font-size: 18px; line-height: 45px;">Sales
    <br>
        <span id="totalSales" ></span>
</div>
    <br>
    <div class="total" style="width: 300px;height: 100px;background-color: red;color: white;text-align: center; font-size: 18px; line-height: 45px;">Transaction
    <br>
        <span id="totalTransaction" ></span>
</div>
<label>Chain id:</label>
<input type="text" id="dept-input"></input>
<br>
<br>
<label>Visitors:</label>
<input type="text" id="price-input"></input>