Json Dropdown list

Question

When I click on the department to install the subject, the services to install when I click on the subject. But matters did not see when I click on services. I think it is inaccurate to describe the json. Can you help me with this. Thank you. My Jquery Code;

/* <![CDATA[ */

(function($) {

$.fn.changeType = function(){

    var data = [
        {
        "department": "IT",
        "subject": [
                {"title":"Programmer",
                        "services" :[
                        {"name":"example1"},
                        {"name":"example2"}
                                  ]

                },
                {"title":"Solutions Architect"},
                {"title":"Database Developer"}
                ]
        },
        {"department": "Accounting",
        "subject": [
                {"title":"Accountant"},
                {"title":"Payroll Officer"},
                {"title":"Accounts Clerk"},
                {"title":"Analyst"},
                {"title":"Financial Controller"}
                ]
        },
        {
        "department": "HR",
        "subject": [
                {"title":"Recruitment Consultant"},
                {"title":"Change Management"},
                {"title":"Industrial Relations"}
                ]
        },
        {
        "department": "Marketing",
        "subject": [
                {"title":"Market Researcher"},
                {"title":"Marketing Manager"},
                {"title":"Marketing Co-ordinator"}
                ]
        }
        ]

        var options_departments = '<option>Select<\/option>';
        $.each(data, function(i,d){
            options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
        });
        $("select#departments", this).html(options_departments);

        $("select#departments", this).change(function(){
            var index = $(this).get(0).selectedIndex;
            var d = data[index-1];  // -1 because index 0 is for empty 'Select' option
            var options = '';
            if (index > 0) {
                $.each(d.subject, function(i,j){
                            options += '<option value="' + j.title + '">' + j.title + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#subject").html(options);
        })
};


        $("select#subject", this).change(function(){
            var index = $(this).get(0).selectedIndex;
            var j = data[index-1];  // -1 because index 0 is for empty 'Select' option
            var options = '';
            if (index > 0) {
                $.each(j.services, function(i,b){
                            options += '<option value="' + b.name + '">' + b.name + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#services").html(options);
        })




})(jQuery);

$(document).ready(function() {
    $("form#search").changeType();
});

/* ]]> */

My html code;

<form id="search" action="" name="search">
    <select name="departments" id="departments">
        <option>Select</option>
    </select>

    <select name="subject" id="subject">
        <option>Select</option>
    </select>

    <select name="services" id="services">
        <option>Select</option>
    </select>

</form>

Answer 1

I edited your code and now it works (check it by selecting the first "IT" then "Programmer" in the fiddle). Of course if there are no "Services" nothing is shown in the third select. You should add some logic to it so that it shows the third select only if there are services related to your subject

(function($) {


    var data = [
        {
        "department": "IT",
        "subject": [
            {
            "title": "Programmer",
            "services": [
                {
                "name": "example1"},
            {
                "name": "example2"}
                          ]

            },
        {
            "title": "Solutions Architect"},
        {
            "title": "Database Developer"}
        ]},
    {
        "department": "Accounting",
        "subject": [
            {
            "title": "Accountant"},
        {
            "title": "Payroll Officer"},
        {
            "title": "Accounts Clerk"},
        {
            "title": "Analyst"},
        {
            "title": "Financial Controller"}
        ]},
    {
        "department": "HR",
        "subject": [
            {
            "title": "Recruitment Consultant"},
        {
            "title": "Change Management"},
        {
            "title": "Industrial Relations"}
        ]},
    {
        "department": "Marketing",
        "subject": [
            {
            "title": "Market Researcher"},
        {
            "title": "Marketing Manager"},
        {
            "title": "Marketing Co-ordinator"}
        ]}
    ]
    var selectedDepartment, selectedSubject;

    $.fn.changeType = function() {

        var options_departments = '<option>Select<\/option>';
        $.each(data, function(i, d) {
            options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
        });
        $("select#departments", this).html(options_departments);

        $("select#departments").change(function() {
            var index = $(this).get(0).selectedIndex;

            var d = data[index - 1]; // -1 because index 0 is for empty 'Select' option
            selectedDepartment = d;
            var options = '';
            if (index > 0) {
                options += '<option>Select<\/option>';
                $.each(d.subject, function(i, j) {
                    options += '<option value="' + j.title + '">' + j.title + '<\/option>';
                });
            } else {
                options += '<option>Select<\/option>';
            }
            $("select#subject").html(options);
        })
    };


    $("select#subject").change(function() {
        var index = $(this).get(0).selectedIndex;
        selectedSubject = selectedDepartment.subject[index -1];
        var options = '';
        if (index > 0) {
            $.each(selectedSubject.services, function(i, b) {
                options += '<option value="' + b.name + '">' + b.name + '<\/option>';
            });
        } else {
            options += '<option>Select<\/option>';
        }
        $("select#services").html(options);
    })




})(jQuery);

$(document).ready(function() {
    $("form#search").changeType();
});

Fiddle here:

http://jsfiddle.net/fF38L/

EDIT - to make it work on IE8 take off the console.log()

http://jsfiddle.net/fF38L/1/