CODEWITHSUNDEEP
jqueryarrays
Brownman Revival
Brownman Revival

Reputation: 3850

Select Option (2 dependent) based on array jquery

[{
    "subclass": "Class 1",
    "SubClass": [{
        "subclass": "Class 1",
        "subid": "1",
        "price": "1.6625"
    }, {
        "subclass": "Class 1",
        "subid": "2",
        "price": "1.575"
    }]
}, {
    "subclass": "Class 2",
    "SubClass": [{
        "subclass": "Class 2",
        "subid": "1",
        "price": "3.0625"
    }, {
        "subclass": "Class 2",
        "subid": "2",
        "price": "2.8"
    }, {
        "subclass": "Class 2",
        "subid": "3",
        "price": "2.5375"
    }, {
        "subclass": "Class 2",
        "subid": "4",
        "price": "2.275"
    }]
}]


for (var i = 0; i < data.length; i++) {
    var SubClass = data[i].SubClass;
    for (var j = 0; j < SubClass.length; j++) {

        $(selectid).append('<option id=' + SubClass[j].subid + ' value="' + SubClass[j].subid + '">' + SubClass[j].subid + '</option>');

    }
    $(selectclass).append('<option id=' + data[i].subid + ' value="' + data[i].subclass + '">' + data[i].subclass + '</option>');
}

I have this array above and i want to put the subclass value of the array into one select and the subid in the next select. My problem is i want to show only the subid that is available for each subclass currently in my code it is showing all subid

UPDATE

FIDDLE

Here is a fiddle what i expect here is for Class 1 the id is only 1 and 2 for Class 2 the id is 1 , 2 , 3 , and 4

Upvotes: 0

Views: 53

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use a change event handler

var selectclass = $('#selectclass');
selectclass.empty();
var selectid = $('#selectid');
selectid.empty();

$.each(data, function (i, item) {
    $('<option id=' + item.subid + ' value="' + item.subclass + '">' + item.subclass + '</option>').appendTo(selectclass).data('item', item);
});

selectclass.on('change.selectid', function () {
    var item = $(this).find('option:selected').data('item');
    selectid.empty();
    $.each(item.SubClass, function (i, sub) {
        $('<option id=' + sub.subid + ' value="' + sub.subid + '">' + sub.subid + '</option>').appendTo(selectid);
    });
}).trigger('change.selectid');

Demo: Fiddle

Upvotes: 1

Related Questions