Adding options to List Box in client side Javascript

Adding option to List box Options to a drop down list box can be added dynamically using client side JavaScript. We will discuss a simple way of adding options to a list. The process of adding can be controlled based on different condition required. Depending on conditions options can be removed also.

Here we will take care that the options are added on the page load , so by default the list box is pre populated when the page is displayed. You can see the demo at the end of this page. The main function creates a new OPTION object and assigns values and text part of the option. Here is the function which collects the list box name, value and text as inputs and then adds the option to the list box.
DEMO of adding option to list box Script
Here is the function
function addOption(selectbox,text,value )
{var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
Note that each time the function is called, it adds a new option to the list box. So we can add one option by calling the function once. Like this.
addOption(document.drop_list.Month_list,'January', 'January');
So this way we can create a drop down list box of all the months by calling the function each time for a month. So with this now you can easily create the list box. But we will add another step to this by using one array of months. So from the array of months we will loop through and add each month to the list box. Here is how to create the array

var month = new Array("January","February","March","April","May","June",
"July","August","September","October","November","December");
So now once our array is ready with data, we will loop through the array by using for loop and then call the addOption function using the data of the array. Here is the code.
for (var i=0; i < month.length;++i){
addOption(document.drop_list.Month_list, month[i], month[i]);
}
You can see with this array we will able to populate the drop down list box of months. Here is the simple code for html body tag and the form with drop down list
<body  onLoad="addOption_list()";>
<FORM name="drop_list" action="yourpage.php" method="POST" >
		<SELECT  NAME="Month_list">
<Option value="" >Month list</option>
</SELECT>
</form>
</body>

One option selected by default

We can keep one option selected by default while adding option to list box. Here is the syntax for this .
document.drop_list.Month_list.options[i].selected=true;
Here i is the variable or number of particular option. To make it clear we will use this in our Listbox demo ( shown above ). We will keep the current month selected while populating the listbox. To get the current month we will use getMonth() function.

Demo of selecting default option

Here is the change in source code.
<html>
<head>
<title></title>
<META NAME="DESCRIPTION" CONTENT="">
<META NAME="KEYWORDS" CONTENT="">


<script language="javascript">
var dt=new Date();
var dt_month=dt.getMonth() +1;
//alert(dt_month);
function addOption(selectbox,text,value )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}

function addOption_list(){
var month = new Array("January","February","March","April","May","June","July","August",
"September","October","November","December"); for (var i=0; i < month.length;++i){ addOption(document.drop_list.Month_list, month[i], month[i]); if(i== dt_month){document.drop_list.Month_list.options[i].selected=true;} } } </script> </head> <body onLoad="addOption_list()";> You can see the view-> Source of this page. <br><br> <FORM name="drop_list" action="yourpage.php" method="POST" > <SELECT NAME="Month_list"> <Option value="" >Month list</option> </SELECT> </form> </body> </html>

Adding option to Datalist

Datalist is included in HTML5. The advantage of datalist is users is not limited to given options only. You can learn basics of datalist in our HTML section. By using JavaScript we can add options to datalist.
Adding options to datalist
JavaScript Validation onChange event of Listbox
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Suresh

    28-01-2010

    "selectbox.options.add(optn);" is not working in IE...
    smo

    28-01-2010

    Check the Demo link. It is working fine in IE, FireFox n Chrome
    Prasannjit

    08-06-2010

    how can we give link on add more option if we want to add more text box?
    Raza

    23-06-2010

    For adding more items from text box: var NewItem = document.FormName.AddMoreTextBox.value; var optn = document.createElement("OPTION"); optn.text = NewItem; optn.value = NewItem; document.PlotForm.ScripName.options.add(optn);
    rajesh

    10-07-2010

    Please help me for my query. I have 5 text box(option A to option E) and one dropdown list. in that im showing in listitem " A to E". in my case wat i need is. if user enter values only in Textbox A and textbox B then dropdwonlist listitem should show only option A&B. same if textbox A,B,C,D has value and E textbox empty. then in dropdownlist it should not get display E. i think it is only possible thru javascript. pls help... Thanks in advance
    Ramesh Agye

    06-09-2010

    Hi, sir i want when i select jan and hit submit button then open a new htm page for jan same nest... it is possible Ramesh Agye
    Mikko

    06-05-2011

    How can I add names to the options?
    Santhosh K S

    23-04-2012

    i have dropdownlist having some filenames,and i have textbox, when i enter "Ab" in textbox,all file names started with Ab should list in same dropdown list useing javascript in client side, please help me
    Jim

    11-05-2012

    Excellent. Simple, with a demo. Just what I needed. Thank you!
    Devi

    02-01-2013

    that totally works...simple , nice and easy
    safina

    05-06-2014

    in function addOption(selectbox,text,value ), can this selectbox be an id of a div for dropdown
    soumita

    07-10-2014

    if i am populating a dropdown list based on selection from another list, then how can i avoid duplication of options on the 2nd list, if we select the same option from the ist list again?
    please reply.thank you.
    Laskshmisaha

    30-06-2016

    hiii,am noob to php, so i need a clear example code for three linked dropdown list....
    Php Expert Programmer

    05-06-2017

    Thanks sir,
    Worked for me first time. Saved me a lot of work.
    Thanks again.

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer