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!