Question

我是Jquery和highcharts的新手。所以我在SO上发布这个问题

我有一个jquery下拉列表，它是多依赖的。当页面加载时，＆＃34;亚洲＆＃34;下的值（今天，昨天和过去一周的访客）被展示。和值根据选定的下拉列表进行更改。此值将提取到文本div。这是jsfiddle http://jsfiddle.net/binoymat/d9f8t9vj/17/

HTML代码：

<select id="category"></select>
<select id="category1"></select>
<select id="category2"></select>
<select id="category3"></select>
<br>
<br>
<div class="row">
<div class="col-sm-2 " id="services_block" style="width: 230px;height: 100px; background-color: orange;color: white; line-height: 30px; text-align: center; font-size: 100%;  font-weight: bold; border-left:3px solid white;
border-right:3px solid white;" >
Visitors 
<br> CURRENT DAY
<br>
<span id="totalVisitorsCurrentDay" style="color: black; font-size: 150%; font-weight: bold;" > </span>
</div>
<br>


<div class="col-sm-2" id="services_block" style="width: 180px;height: 100px;  background-color: red;color: white;line-height: 30px; text-align: center; font-  size: 100%;  font-weight: bold; border-left:3px solid white;
 border-right:3px solid white;">Visitors 
<br> PAST DAY
<br>
    <span id="totalVisitorsPastDay" style="color: black; font-size: 150%;  font-weight: bold;"></span>
    </div>
 <br>

<div class="col-sm-2" id="services_block" style="width: 180px;height: 100px;  background-color: red;color: white;line-height: 30px; text-align: center; font-size: 100%;  font-weight: bold; border-left:3px solid white;
border-right:3px solid white;">Visitors 
<br> PAST WEEK
<br>
    <span id="totalVisitorsPastWeek" style="color: black; font-size: 150%;  font-weight: bold;"></span>
    </div>



 </div>
 <br>

Jquery代码

$.getJSON("https://api.myjson.com/bins/2soxd", 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 totalVisCurrDay= 0;
    var totalVisPasDay= 0;
    var totalVisPasWeek= 0;
    $.each(items, function (k, v) {
        if (v.id == dept_number) {
            if (tochange == true) {
                $("#category1").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                $("#category2").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
                $("#category3").append('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.date + '</option>');
            } else {
                $("#category1").html('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                $("#category2").html('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.zone + '</option>');
                $("#category3").html('<option value="' + v.id + '" data-visitorscurrday="' + v.visitorscurrday + '" data-visitorspastday="' + v.visitorspastday + '" data-visitorspastweek="' + v.visitorspastweek + '" data-price="' + v.visitors + '">' + v.date + '</option>');
                tochange = true;
            }
            total += v.visitors;
            totalVisCurrDay += v.visitorscurrday;
            totalVisPasDay += v.visitorspastday;
            totalVisPasWeek += v.visitorspastweek;
        }
    });
    $('#dept-input').val(dept_number);
    $('#price-input').val(total);
    $("#totalVisitors").text(total);
    $("#totalVisitorsCurrentDay").text(totalVisCurrDay);
    $("#totalVisitorsPastDay").text(totalVisPasDay);
    $("#totalVisitorsPastWeek").text(totalVisPasWeek);
}).change();

$("select[id^='category']:not(#category)").on('change', function () {
    var dept_number = parseInt($(this).val());
    var price = $(this).find(':selected').data('price');
   var VisitorsCurrentDay = $(this).find(':selected').data('visitorscurrday');
  var VisitorsPastDay = $(this).find(':selected').data('visitorspastday');
  var VisitorsPastWeek = $(this).find(':selected').data('visitorspastweek');
    $('#dept-input').val(dept_number);
    $('#price-input').val(price);
    $("#totalVisitors").text(price);
   $("#totalVisitorsCurrentDay").text(VisitorsCurrentDay);
    $("#totalVisitorsPastDay").text(VisitorsPastDay);
    $("#totalVisitorsPastWeek").text(VisitorsPastWeek);
});
});

我想知道是否可以创建以下内容： -

a）加载页面时，所有值都必须像这样显示在表格中，以及Highcharts

desired output 1

b）当选择任何下拉选项时，table，value和highcharts也应该像这样改变

Desired Output 2

这可能吗???如果可能的话，请编辑我发布的小提琴。提前谢谢

Jquery下拉，在下拉触发时更改表内的值和highcarts

0 个答案: