Home » JavaScript

How to fill dropdowns using JavaScript?

In this article, we are going to learn how to fill dropdowns through JavaScript?
Submitted by Manu Jemini, on October 16, 2017

First of all, we are going to create an html document name dropdown.html and adding our JavaScript named dropdown.js using script tag like <script src="dropdown.js"></script>.

Then, we create two dropdowns by using select tags with id st and ct and add an onchange event in first dropdown. So that dropdown for state will be filled with the given states.

Now, in JavaScript file we make four functions addElements, removeElements to add and remove options from select tag and fillState, fillCity to fill the data in dropdowns by their id(s), which we get by calling document.getElementById() method.

JavaScript (dropdown.js)

// addElements function to add elements as options
function addElements(dd,array)
{  for(i=0;i<array.length;i++)
    {
	var opt=document.createElement('option');
     opt.text=array[i];
     opt.value=array[i];
	 dd.add(opt);
	}
}
//  removeElements function to remove elements in dropdown city while changing the states 
function removeElements(dd)
{  for(i=dd.options.length-1;i>=0;i--)
    {
	  dd.remove(i);
	}
}
// function to fill states
function fillState()
{  
	var state=["-Select-","Madhya Pradesh","Haryana","Gujrat","Himachal"];
	var st=document.getElementById("st");
	addElements(st,state);
}
// functions to fill city dropdown after changing the state values
function fillCity()
{
	var st=document.getElementById("st");
	var ct=document.getElementById("ct");
	var i=st.selectedIndex;
	removeElements(ct);
	//switch cases according to the state values
	switch(i)
	{ 
		case 1:
			var mp=["-Select-","Gwalior","Bhopal","Indore","Ujjain"];
			addElements(ct,mp);
			break;
		case 2:
			var hr=["-Select-","Rohtak","Faridabad","Sonipat","Panipat"];
			addElements(ct,hr);
			break;
		case 3:
			var gj=["-Select-","Ahemdabad","Surat","Gandhinagar","Rajkot"];
			addElements(ct,gj);
			break;
		case 4:
			var hp=["-Select-","Dharamshala","Shimla","kasauli","Nahan"];
			addElements(ct,hp);
			break;
	}
}

HTML Code

<html>
	<head>
		<title>
			Example of dropdown filling
		</title>
		<script src="dropdown.js"></script>
	</head>
	<body onload="fillState();">
		<select id="st" onchange="fillCity();"></select>
		<br><br>
		<select id="ct">
		<option>-City-</option>
		</select>
	</body>
</html>

Output

Dropdown filling javascript





Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.



Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing » Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.