Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Intermediate
Oct 26, 2001

Add Options Dynamically to the Select Control on Client Side


Normally, options in select control will be added at design time or will be created on the server site. This code explains how to add options to the select control dynamically on the client side. This allows the visitor to add options on the client side and submit it to the server side.
 
<html>
<head>
<script language="Javascript">
function addItem()
{
        // checking whether label is null
	if(document.frmTest.txtItemText.value=="")
{
	 	alert("Please enter label to the 
Item.")
		return; //returning with out further 
execution	}

        // checking whether label is null
	if(document.frmTest.txtItemValue.value=="")
	{
		alert("Please enter value to the Item.")
		return;//returning with out further 
execution

	}
/*

statement "new Option(label,value)" creates the new 
option and add this option to at last in select control

*/

document.frmTest.lstItem.options
[document.frmTest.lstItem.options.length]= new
Option(document.frmTest.txtItemText.value,
document.frmTest.txtItemValue.value);
}
</script>
</head>
<body>
<form name=frmTest>
Enter Text : <input type=text name=txtItemText value="">
Enter Value: <input type=text name=txtItemValue value="">
<input type=button value=AddItem onclick="addItem()">
Items : <select name=lstItem>
<option value="">---Select---</option>
</select>
</form>
<body>
</html>
Senthil Kumar
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date