WebDevelopersNotes logo

home-icon Home / HTML / HTML forms selection list and double-clicks

HTML forms selection list and double-clicks

HTML forms selection list and double-clicks

The double-click mouse action is captured by ondblclick() event handler. We’ll see how to use it in a selection list to display the selected text in another text field.
IMP: For ondblclick() to work, the size of the selection list must be more than 1.

Put the function below in the HTML head section between the SCRIPT tags

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

function put_it()
   {
   var w = document.myform.sel_list.selectedIndex;
   document.myform.r_text.value = 
      document.myform.sel_list.options[w].text;
   }

//-->
</SCRIPT>

Now, we create the selection list and the text field.

<FORM NAME="myform">
<SELECT NAME="sel_list" ondblclick="put_it()" SIZE="3">
<OPTION VALUE="value1">The First Item
<OPTION VALUE="value2">The Second Item
<OPTION VALUE="value3">The Third Item
<OPTION VALUE="value4">The Fourth Item
<OPTION VALUE="value5">The Fifth Item
</SELECT>
<BR>
<INPUT TYPE="TEXT" VALUE="" NAME="r_text" SIZE="20">
</FORM>

Click here to see how this works!

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

"I Am Rich" which displayed a simple misspelled message was a completely useless app on the Apple App Store. It was developed by Armin Heinrich of Germany and was priced at $999.99. Though Apple removed it the very next day, it had already been purchased eight times... and only once accidentally! We have a detailed post on this $999.99 useless app - check it out to know more. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy