Select Option (2 dependent) based on array jquery

Question

[{
    "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

Can you put together a jsfiddle

leigero
– leigero

2015-04-24 11:36:11 +00:00
Commented Apr 24, 2015 at 11:36 — leigero
– leigero, Commented Apr 24, 2015 at 11:36

Arun P Johny · Accepted Answer · 2015-04-24 11:53:48Z

1

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

edited Apr 24, 2015 at 11:53

answered Apr 24, 2015 at 11:50

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Brownman Revival Over a year ago

$selectclass is not defined

Brownman Revival Over a year ago

is there no way to do this without onchange i mean a way in which to show the id depending on the class?

Arun P Johny Over a year ago

@HogRider sorry... what do you mean by show the id depending on the class

Brownman Revival Over a year ago

where did you put the class selectid in this lines change.selectid and selectclass.on('change.selectid', function () { i cant find them because in html the class attr is empty

Arun P Johny Over a year ago

@HogRider that is called a namespace in the context of events - api.jquery.com/on/#event-names

|

Collectives™ on Stack Overflow

Select Option (2 dependent) based on array jquery

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related