This example completely working with the help of Jquery and javascript. The below javascript code is used to poplulate the data to the dropdown.
<script type=”text/javascript”>
var courseByCategory = {
Mechanical: [“Mec-course-1”, “Mec-course-2”, “Mec-course-3”, “Mec-course-4”],
Civil: [“Civ-course-1”, “Civ-course-2”, “Civ-course-3”, “Civ-course-4”],
IT: [“IT-course-1”, “IT-course-2”, “IT-course-3”, “IT-course-4”],
EEE: [“EEE-course-1”, “EEE-course-2”, “EEE-course-3”, “EEE-course-4”]
}
function changecat(value) {
if (value.length == 0) document.getElementById(“course”).innerHTML = “<option></option>”;
else {
var catOptions = “”;
for (categoryId in courseByCategory[value]) {
catOptions += “<option>” + courseByCategory[value][categoryId] + “</option>”;
}
document.getElementById(“course”).innerHTML = catOptions;
}
}
</script>
Code for html dorpdown based on another dropdown:
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<title>How to populate html dropdown based on another dropdown using Jqery</title>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.9.1.js”></script>
<!– TODO: Missing CoffeeScript 2 –>
<script type=”text/javascript”>
var courseByCategory = {
Mechanical: [“Mec-course-1”, “Mec-course-2”, “Mec-course-3”, “Mec-course-4”],
Civil: [“Civ-course-1”, “Civ-course-2”, “Civ-course-3”, “Civ-course-4”],
IT: [“IT-course-1”, “IT-course-2”, “IT-course-3”, “IT-course-4”],
EEE: [“EEE-course-1”, “EEE-course-2”, “EEE-course-3”, “EEE-course-4”]
}
function changecat(value) {
if (value.length == 0) document.getElementById(“course”).innerHTML = “<option></option>”;
else {
var catOptions = “”;
for (categoryId in courseByCategory[value]) {
catOptions += “<option>” + courseByCategory[value][categoryId] + “</option>”;
}
document.getElementById(“course”).innerHTML = catOptions;
}
}
</script>
<style>
select
{
padding: 12px;
min-width:280px;
margin-top:10px;
}
.san{
width:280px;
margin:0 auto;
margin-top:90px;
background-color:#009688;
padding:55px;
}
label
{
color:#fff;
margin-bottom:25px;
}
html{
background-color: #0aa798;
}
</style>
</head>
<body>
<div class=”san”>
<label>Select Branch: </label>
<select name=”branch” id=”branch” onChange=”changecat(this.value);”>
<option value=”” disabled selected>Select</option>
<option value=”Mechanical”>Mechanical</option>
<option value=”Civil”>Civil </option>
<option value=”IT”>Csc & IT</option>
<option value=”EEE”>EEE</option>
</select>
<br/><br/>
<label>Select Course: </label>
<select name=”course” id=”course”>
<option value=”” disabled selected>Select</option>
</select>
</div>
<h1 style=”text-align:center; text-decoration:none; color:#fff;”><a style=”text-decoration:none; color:#fff;” href=”http://www.sanwebcorner.com/”>www.sanwebcorner.com</a></h1>
</body>
</html>
