Cascading Dropdown is not working using jquery

Question

by the way i just got the js code from one of the questions here but i don't why it will not work on mine. please help me.

.js file

 jQuery(function ($) {
    var College = {
        'College of Engineering': ['Civil Engineering', 'Computer Engineering', 'Electronics and Communication Engineering', 'Electrical Engineering', 'Industrial Engineering'],
    }

    var $College = $('#college');
    $('#department').change(function () {
        var department = $(this).val(), clg = College[department] || [];

        var html = $.map(clg, function (cl) {
            return '<option value="' + cl + '">' + cl + '</option>'
        }).join('');
        $College.html(html)
    });
});

is my code wrong? i dont know why it will not work.

the html code for this is

<select class="form-control" name="college" id="college" runat="server">
                     <option value="College">Select College</option>
                     <option value="College of Engineering">College of Engineering</option>
                     <option value="CAS">College of Arts and Science</option>
                     <option value="Commerce">College of Commerce</option> 
                 </select>
<select id="department" class="form-control" runat="server" placeholder="Department" >
                    <option value="Department">Select Department</option>
                </select>

Answer 1

You could do something like this: https://jsfiddle.net/rockmandew/12ej2rt3/

Set your HTML Markup like so: (*this example contains a three step dropdown selection)

<select id="main_list">
    <option value="default" selected>Select Your List</option>
    <option value="mobile">mobile list</option>
    <option value="laptop">laptop list</option>
</select>
<select id="brand" class="secondary"></select>
<select id="version" class="secondary"></select>

Then the JS as follows:

$(function() {
var sel, i,
    list = ['mobile', 'laptop'],
    phone = ['Samsung', 'Nokia'],
    laptop = ['HP', 'Dell'],
    android = ['4.1', '4.2'],
    windows = ['8', '8.1'],
    dev_default = '<option value="default" selected>Select your Device brand</option>',
    os_default  = '<option value="default" selected>Select your OS version</option>';

sel_brand = $('#brand');
sel_version = $('#version');

$('select').change(function() {
    switch (this.id) {
        case 'main_list':
            $('.secondary').hide();
            sel_brand.find('option').remove();
            sel_brand.append(dev_default);
            sel_brand.show();
            if (this.value == 'mobile') {
                for (i = 0; i < phone.length; i++) {
                    $("#brand").append(
                        '<option value="' + phone[i] + '">' + phone[i] + '</option>'
                    );
                }
            }else if (this.value == 'laptop') {
                for (i = 0; i < phone.length; i++) {
                    $("#brand").append(
                        '<option value="' + laptop[i] + '">' + laptop[i] + '</option>'
                    );
                }
            }
            break;
        case 'brand':
            sel_version.find('option').remove();
            sel_version.append(os_default);
            sel_version.show();
            if (this.value == 'Samsung') {
                for (i = 0; i < android.length; i++) {
                    $("#version").append(
                        '<option value="' + android[i] + '">' + android[i] + '</option>'
                    );
                }
            }else if (this.value == 'Nokia' || this.value == 'HP' || this.value == 'Dell') {
                for (i = 0; i < windows.length; i++) {
                    $("#version").append(
                        '<option value="' + windows[i] + '">' + windows[i] + '</option>'
                    );
                }
            }
            break;
    }
});

}); //END document.ready()

Also, if you need/want more information on how to populate these dropdowns dynamically from either a text file, JSON, or a database - check out this article: https://css-tricks.com/dynamic-dropdowns/