Cascading Dropdown using javascript not working

Question

I have this code in javascript but it is not working. can someone check my code? By the way i just got this code from one of the question here. thanks

function CollegeDepartment() {
    var s1 = document.getElementById("college");
    var s2 = document.getElementById("department");
    s2.innerHTML = "";
    if (s1.value == "College of Engineering") {
        var optionArray = ["Civil Engineering", "Computer Engineering", "Electrical Engineering", "Electronics and Communication Engineering, Industrial Engineering, Mechanical Engineering"];
    } else if (s1.value == "CAS") {
        var optionArray = ["Political Science", "Mascomm", "Liacomm"];
    } else if (s1.value == "Commerce") {
        var optionArray = ["Business Ad", "Hotel Management", "Tourism"];
    } else if (s1.value == "Education") {
        var optionArray = ["SPED"];
    } else if (s1.value == "CICCT") {
        var optionArray = ["Computer Science", "Information Technology"];
    }

    for (var option in optionArray) {
        var newOption = document.createElement("option");
        newOption.value = optionArray[option];
        newOption.innerHTML = optionArray[option];
        s2.options.add(newOption);
    }
};

EDIT:

HTML

 <select class="form-control" name="college" id="college" runat="server" oninput="CollegeDepartment()">
                 <option selected>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>
                 <option value="Education">College of Education</option>
                 <option value="CICCT">CICCT</option>   
             </select>
        </div>
            <br />

        <div class="form-group">
            <select id="department" name="department" class="form-control" runat="server" placeholder="Department" >
                <option value="Department" selected>Select Department</option>
            </select>
        </div>

Create a snippet to show us what is not working, cost some of my time to create one jsfiddle, however, it just works fine. — fuyushimoya
– fuyushimoya, Commented Oct 2, 2015 at 15:41
@fuyushimoya it will work in fiddle but i don't know why it will not work on the visual studio? — Rigel Kent Carbonel
– Rigel Kent Carbonel, Commented Oct 2, 2015 at 15:49
@fuyushimoya I'm using aspx by the way. do you have an idea how to make it work? — Rigel Kent Carbonel
– Rigel Kent Carbonel, Commented Oct 2, 2015 at 15:55
Somehow aspx is not something I'm familiar with, did you add something like onchange,oninput as I added in jsfiddle? Can't give more advice other than this. — fuyushimoya
– fuyushimoya, Commented Oct 2, 2015 at 15:57

ZeroBased_IX · Accepted Answer · 2015-10-02 16:11:11Z

Found your problem right away, you was using the oninput event what you needed was onchange

So this:

 <select class="form-control" name="college" id="college" runat="server" oninput="CollegeDepartment()">

Becomes:

 <select class="form-control" name="college" id="college" runat="server" onchange="CollegeDepartment()">

function CollegeDepartment() {
    var s1 = document.getElementById("college");
    var s2 = document.getElementById("department");
    s2.innerHTML = "";
    if (s1.value == "College of Engineering") {
        var optionArray = ["Civil Engineering", "Computer Engineering", "Electrical Engineering", "Electronics and Communication Engineering, Industrial Engineering, Mechanical Engineering"];
    } else if (s1.value == "CAS") {
        var optionArray = ["Political Science", "Mascomm", "Liacomm"];
    } else if (s1.value == "Commerce") {
        var optionArray = ["Business Ad", "Hotel Management", "Tourism"];
    } else if (s1.value == "Education") {
        var optionArray = ["SPED"];
    } else if (s1.value == "CICCT") {
        var optionArray = ["Computer Science", "Information Technology"];
    }

    for (var option in optionArray) {
        var newOption = document.createElement("option");
        newOption.value = optionArray[option];
        newOption.innerHTML = optionArray[option];
        s2.options.add(newOption);
    }
};

<select class="form-control" name="college" id="college" runat="server" onchange="CollegeDepartment()">
                 <option selected>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>
                 <option value="Education">College of Education</option>
                 <option value="CICCT">CICCT</option>   
             </select>
        </div>
            <br />

        <div class="form-group">
            <select id="department" name="department" class="form-control" runat="server" placeholder="Department" >
                <option value="Department" selected>Select Department</option>
            </select>
        </div>

Try the above snippent, alternatively here is a CodePen: http://codepen.io/anon/pen/PPpWJp

You're very welcome Rigel, it's a simple mistake, I've certainly made it before.

Collectives™ on Stack Overflow

Cascading Dropdown using javascript not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related