[英]Cascading Dropdown using javascript not working
我在javascript中有此代码,但无法正常工作。 有人可以检查我的代码吗? 顺便说一下,我只是从这里的一个问题中得到了这段代码。 谢谢
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);
}
};
编辑:
的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>
立即发现您的问题,您正在使用oninput
事件,您需要的是onchange
所以这:
<select class="form-control" name="college" id="college" runat="server" oninput="CollegeDepartment()">
成为:
<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>
试试上面的片段,或者这里是一个CodePen: http ://codepen.io/anon/pen/PPpWJp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.