Выберите вариант (2 зависимые) на основе массива 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>'); 
} 

У меня есть этот массив выше, и я хочу поставить значение массива subclass в один выберите и subid в следующем выборе. Моя проблема в том, что я хочу, чтобы показать только subid, который доступен для каждого subclass в настоящее время в моем коде она показывает всего Subid

UPDATE

FIDDLE

Вот скрипка, что я ожидал здесь для Class 1 идентификатор только 1 and 2 для Class 2 идентификатор является 1 , 2 , 3 , and 4

Answer 1

Вы должны использовать обработчик события изменения

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'); 

Демо: Fiddle