List Categories and Subcategories using AJAX

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.
Who is Participating?
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

birwinAuthor Commented:
Thank you. I apologize for the delay awarding points.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.