List Categories and Subcategories using AJAX

Posted on 2011-05-10
Last Modified: 2012-05-11
I have a list of categories in a table, (4 cells across and 10 rows deep).

I want a list of subcategories to appear in a div, that will appear below the Category, using AJAX., when the Category is clicked.

Then when a sub category is clicked, I would like the other sub-categories to vanish, and sub-categories of the sub-category to appear, again using AJAX to pull the data from the database.

I am using PHP, MySQL and jQuery on the page.

I'd appreciate your guidance on this. I am a pretty good PHP coder, but jQuery and Javascript is new to me.
Question by:birwin
    LVL 14

    Accepted Solution

    In the example below, I used Province (as Category) and City (as SubCategory). So a Province will have x-number of Cities. You will need to add the URLS that return the JSON Data.

    <html xmlns="">
        <select id="ddlProvinces" name="ddlProvinces" class="inputWidth">
            <option value="0" title="Select a Province"></option>
        <select id="ddlCities" name="ddlCities" class="inputWidth hideList">
            <option value="0" title="Select a City"></option>
        <script type="text/javascript">
            $.ready(function () {
                $("select[id='Provinces'] option[value='@ViewBag.currProvince']").attr('selected', 'selected');
            $(document).ready(function () {
                var provinceList = $("#ddlProvinces"); //get the province drop downlist
                //The Url (/Branches/GetProvinces) returns a JSON list of provinces
                $.getJSON("/Branches/GetProvinces"), function (data) {
                    $.each(data, function (i, province) {
                        var option = new Option(province.title,; //for each of the provinces returned, create an Option
                        provinceList.append(option); //Append the Option to your dropdownlist
                //When-ever the Province dropDownlist's change event fires, Get the cities for that provinces (by running the GetCittiesInProvince(int province) method)
                provinceList.change(function () {
                    if (provinceList.val() != null) {
                    else {
                        $("#error").html("select a province"); // require the user to select something from the province dropdown list
                //Given a ProvinceID, get the cities that correspond
                function GetCitiesInProvince(province) {
                    var cityList = $("#ddlCities"); // get the City DropDownList
                    if (province == 0) {
                    else {
                    //the URL at Branches/GetCitiesInProvince?id=12 will return a JSON list of Cities (or Sub-Categories in your case) whose ProvinceID is 12
                        $.getJSON("Branches/GetCitiesInProvince?id=") + province, function (data) {
                            $.each(data, function (i, city) {
                                var option = new Option(city.title,;
                                cityList.append(option);//append the options to the subcategory list 
                        cityList.addClass('showList').removeClass('hideList'); //if there are no items returned, hide the dropdownlis for sub categories

    Open in new window

    LVL 6

    Author Closing Comment

    Thank you. I apologize for the delay awarding points.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn how to count occurrences of each item in an array.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now