Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

Select Removing all option enter new values using Javascript Object

Select Removing all option enter new values using Javascript Object

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>

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of
Do you have any Query / Suggestion