faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

8 of 12 people (67%) answered Yes
Recently 7 of 10 people (70%) answered Yes

Entry

How can I add and edit item in List Box ?

Apr 7th, 2008 22:40
ha mo, Abolfazl Shirazi, kalpesh maniar,


Abolfazl Shirazi :
Well Friend Just if you know how to add or remove list items, you will 
be able to make whatever you like. It is just piece of a cake !
To add try : document.formname.listname.options[ItemNumber] = new 
Option(Name,Value)
and to remove try : document.formname.listname.options[ItemNumber] = 
null
For Example you can easily add item and remove item in the page below, 
just try it !!!
<html>
<head>
<script language="javascript">
function AddToList() {
	Data1 = document.MyForm.ItemNameField.value
	Data2 = document.MyForm.ItemValueField.value
	document.MyForm.MyList.options[document.MyForm.MyList.length] 
= new Option(Data1,Data2)
}
function View() {
	if (document.MyForm.MyList.selectedIndex != -1) {
		alert(document.MyForm.MyList.options
[document.MyForm.MyList.selectedIndex].value)
	}
}
function Remove() {
document.MyForm.MyList.options[document.MyForm.MyList.selectedIndex] = 
null
}
</script>
</head>
<body>
<form name="MyForm">
<select name="MyList" size="5">
<option value="MyLanguage" selected="selected">JavaScript</option>
<option value="YourLanguage">VBScript</option>
</select>
<br>
<input type="button" value="Click here to view the item value" 
onclick="View()">
<hr>
<p>
Item Name : <input type="text" name="ItemNameField" 
value="Abolfazl"><br>
Item Value : <input type="text" name="ItemValueField" 
value="Shirazi"><br>
<input type="button" value="Add an item to list" onclick="AddToList()">
<hr>
<input type="button" value="Remove Selected Item" onclick="Remove()">
</form>
</body>
</html>
It is really easy and now you can edit item value and item name if you 
just think a bit !!!
Try it and know that you can Friend !
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com