Programming Tutorials

(追記) (追記ここまで)

Click to remove an element from a select html form using javascript

By: Emiley J. in Javascript Tutorials on 2008年07月17日 [フレーム]

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.

Previous
<< Show how many characters remaining in a html text box using javascript

Next
History and evolution of Javascript>>

(追記) (追記ここまで)