Selection List Event Handling

Selection List Event Handling : List : Form Control JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Form Control » List »

Selection List Event Handling



<HTML>
<HEAD>
<TITLE>Handling Selection List Events</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function updateOrder() {
 var orderString="";
 var n = document.diner.entries.length;
 for(i=0;i<n;++i) {
  if(document.diner.entries.options[i].selected) {
   orderString+=document.diner.entries.options[i].value+"n"
  }
 }
 document.diner.summary.value=orderString
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="diner">
<H2 ALIGN="CENTER">The Web Diner</H2>
<P><B>Place your order:</B></P>
<SELECT NAME="entries" SIZE="4" MULTIPLE="MULTIPLE" ONCHANGE="updateOrder()">
<OPTION VALUE="Hamburger">A</OPTION>
<OPTION VALUE="Hot Dog">B</OPTION>
<OPTION VALUE="Chicken Sandwich">C</OPTION>
<OPTION VALUE="French Fries">D</OPTION>
<OPTION VALUE="Onion Rings">E</OPTION>
<OPTION VALUE="Soda">F</OPTION>
<OPTION VALUE="Milk Shake">G</OPTION>
<OPTION VALUE="Coffee">H</OPTION></SELECT>
<P><B>You ordered: </B></P>
<P>
<TEXTAREA NAME="summary" ROWS="4" COLS="20"></TEXTAREA></P>
<P><INPUT TYPE="SUBMIT" NAME="order" VALUE="Let me have it!"></P>
</FORM>
</BODY>
</HTML>