Sometimes We face some problem How can i dynamically remove all options of a drop down box in javascript? How to reset Select box all option and enter new values ? How to create dynamic dropdown from javascript Object if you don’t want to use any database.
In this tutorial I will show an example how to do this in a easy way, you can even copy paste and create a filename.html and open in browser
First we need two dropdown, When we select an option from First One(that will hold some class like VI and VII [CBSE]), Sencond drodown will show related mathematics topic/lession to related Class
Removing all option of dropdown and enter new values using Javascript Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Creating dynamic Dropdown using Javascript Object</title>
</head>
<body>
<h1>Creating dynamic Dropdown using Javascript Array</h1>
<label>First Drop Down</label><br/>
<select name="student_class" id="student_class" class="change form-control" required>
<option value="">Select a Class</option>
<option value="VI">VI</option>
<option value="VII">VII</option>
</select><br/>
<label for="">Topics</label><br/>
<select name="topic" id="topic" class="form-control" required>
<option value="">Select a Topic</option>
</select>
<!--Jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--Jquery CDN -->
<script>
$(document).ready(function(){
$("#student_class").change(function(){
var className=$("#student_class").val();
var cobj;
if(className=="VI"){
cobj ={'Knowing Your Numbers':'Knowing Your Numbers','whole Numbers':'whole Numbers','Playing with Numbers':'Playing with Numbers','Basic Geometric Ideas':'Basic Geometric Ideas','Understanding Elemetary shapes':'Understanding Elemetary shapes',
'Integers':'Integers','Fractions':'Fractions','Decimals':'Decimals','Data Handling':'Data Handling','Mensuration':'Mensuration','Algebra':'Algebra','Ration and Proportions':'Ration and Proportions','Symmetry':'Symmetry','Practical Geometry':'Practical Geometry'
};
}else if(className=="VII"){
cobj = {'Integers' : 'Integers','Fractions and Decimals' : 'Fractions and Decimals','Data Handling' : 'Data Handling','Simple Equations' : 'Simple Equations','Lines and Angles' : 'Lines and Angles','The Triangle and its Properties' : 'The Triangle and its Properties'
,'Congruence of Triangles' : 'Congruence of Triangles','Comparing quantities' : 'Comparing quantities'};
}else if(className=="VIII"){
cobj = {ValueA : 'Text A',ValueB : 'Text B',ValueC : 'Text C',ValueD : 'Text D',ValueE : 'Text E',ValueF : 'Text F'};
}else if(className=="IX"){
cobj = {ValueA : 'Text A',ValueB : 'Text B',ValueC : 'Text C',ValueD : 'Text D',ValueE : 'Text E',ValueF : 'Text F'};
}else if(className=="X"){
cobj = {ValueA : 'Text A',ValueB : 'Text B',ValueC : 'Text C',ValueD : 'Text D',ValueE : 'Text E',ValueF : 'Text F'};
}else{
}
var select = document.getElementById("topic");
//removing previous option
while (select.firstChild) {
select.removeChild(select.firstChild);
}
// generating option based onclick
for(index in cobj) {
select.options[select.options.length] = new Option(cobj[index], index);
}
});
});
</script>
</body>
</html>
