$(document).ready(function() {
    $(".catlist").change(function() {

        var val = $(this).val();

        switch (val) {
            case "8":
                $(".subcatlist").empty();
                $(".subcatlist").append("<option value='0'>Select a category</option>");
                break;
            default:
                var json = $.getJSON("handlers/subcat.ashx", { cat_id: val }, function(data) { updateSubCats(data) });
                break;
        }
    });
    
});

function updateSubCats(data) {
    var subcatlist = $(".subcatlist");
    subcatlist.empty();
    subcatlist.append("<option value='0'>All subcategories</option>");
    
    for (id in data) {
        var text = data[id];
        subcatlist.append("<option value='" + id + "'>" + text + "</option>");
    }
}