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="http://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>