Click to remove an element from a select html form using javascript
By: Emiley J. Printer Friendly Format
If you are looking for a solution to remove an element from a select list just by clicking on it then obviously you can do it using Javascript. This tutorial explains a step by step solution to this problem.
For this you will need the following.
- a select list that has a list of items,
- a javascript that does the trick of removing the element from the list if clicked
For step 1.
Add the following code in your form.
<form name="theform">
<select title="Select Recipients" style="WIDTH: 247px; HEIGHT: 140px" onclick="getDelete(this);" multiple size="5" name="recipients" rows="10" cols="30">
<option value="10008 - group">
friends - group
</option>
<option value="10010 - group">
test - group
</option>
<option value="10011 - group">
java-samples.com - group
</option>
<option value="10012 - group">
m-indya - group
</option>
</select><br>
<small><span class="bodytext">Click on name to remove from recipient list</span><br></small><br>
</form>
For step 2.
Add the following function in your html page.
<script language="javascript" type="text/javascript">
function
getDelete(e){
if(e.selectedIndex>=0)
{
var
elSel = document.forms['theform'].recipients;
var i;
for (i = elSel.length - 1; i>=0; i--)
{
if (elSel.options[i].selected) {
elSel.remove(i);
}
}
}
}
</script>
Thats it you are done. You can try this code in your page and it will work as below.
Comment on this tutorial
- Data Science
- Android
- AJAX
- ASP.net
- C
- C++
- C#
- Cocoa
- Cloud Computing
- HTML5
- Java
- Javascript
- JSF
- JSP
- J2ME
- Java Beans
- EJB
- JDBC
- Linux
- Mac OS X
- iPhone
- MySQL
- Office 365
- Perl
- PHP
- Python
- Ruby
- VB.net
- Hibernate
- Struts
- SAP
- Trends
- Tech Reviews
- WebServices
- XML
- Certification
- Interview
categories
Subscribe to Tutorials
Related Tutorials
Use WinSCP to transfer log files remotely using Javascript
Verifying user input in JavaScript
Javascript to display client date and time on webpage
Getting Browser's height and width using Javascript
Highlighting text on a page using CSS
Scrolling message on the status bar using Javascript
Diabling Right Click option in a browser using Javascript
Password protect a web page using Javascript
Using revealTrans to do page transitions in Javascript
Form validation using Javascript
window.frames[i] in Javascript
Math object and Math functions in Javascript
Archived Comments
1. Hi,
I am new to html, and javascrip
View Tutorial By: Tom Theriault at 2010-12-14 14:54:09