Question

从下拉列表中选择JSON对象时，与该对象相关的值应显示在文本框或div中。我能够做到这一点..我在看的是......

a）当显示下拉列表时，我希望亚洲只显示一次因为他们的ID相同。但在我的小提琴中，它会显示两次。

b）我想要显示两个下拉列表...例如：选择亚洲时，必须显示与新加坡和吉隆坡等亚洲相关的第二个下拉站点。

c）当展示亚洲时，我想在新的文本框中显示新加坡和吉隆坡的总数，但是当选择亚洲的新加坡时，我希望只有新加坡的访客才会显示在文本框中与吉隆坡相反。

我已经把我的小提琴连接到了第一个下拉列表。

这是JSFiddle jsfiddle.net/binoymat/hjsehukf/。

Answer 1

我认为这就是你要找的东西

var items = '[{"chains": "Asia","visitors": 10,"id": 1,"site":"Singapore"},{"chains": "Asia","visitors": 20,"id": 1, "site":"kuala lumpur"},{"chains": "North America","visitors": 30,"id": 2,"site":"Texas"}]';

var checkCountry = [];
$.each(JSON.parse(items), function (k, v) {
    if($.inArray(v.id,checkCountry)  == -1){
    $("#category").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.chains + '</option>');
       checkCountry.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;
    $.each(JSON.parse(items), function (k, v) {
        if(v.id == dept_number){
            if(tochange == true){
            $("#category1").append('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.site + '</option>');
            }else{
               $("#category1").html('<option value="' + v.id + '" data-price="' + v.visitors + '">' + v.site + '</option>');
                tochange = true;
            }
            total += v.visitors;
        }
    });
    $('#dept-input').val(dept_number);
    $('#price-input').val(total);
}).change();   //<<<<<<<<<<<<< onload :)

$("#category1").on('change',function () {
    var dept_number = parseInt($(this).val());
    var price = $(this).find(':selected').data('price');
    $('#dept-input').val(dept_number);
    $('#price-input').val(price);
});

Working Demo

注意：你必须使用v.id和chain，....等来检查如果它的权利与否......根据您的需要进行更改

即使json中存在相同的Id，Jquery也会显示一个值

1 个答案: