There is an internal array that controls this selection box. It is called "options[]" -- inside the array are all the options the user has selected.

The select control also has a property called "length". That stands for the number of options that we originally set up.

I set up the global variable "newText" because everytime we enter this function, every local variable is reset. But we don't want our "newText" variable reset, we want it to keep the old value, too. So, if we set it up before we enter the function, our browser can remember the old value.

Here's the code:

<SCRIPT LANGUAGE = JavaScript>

var newText = ""
function selectionMade()
{
document.form1.Textarea.value = ""

with(document.form1.Select1){
for(var loop_index = 0; loop_index < length; loop_index++){


if (options[loop_index].selected){

newText = options[loop_index].text + newText
document.form1.Textarea.value = newText
}
}
}
}

1. Choose one from drop down list, go to the "selectionMade()" function
   
   <SELECT NAME = Select1 onChange = selectionMade() MULTIPLE>
   
   
2. Globalize newText variable - now everything on this page can use that variable
   
   var newText = ""
   
   
3. Initialize our Textarea to be empty of values
   
   document.form1.Textarea.value = ""
   
   
4. Use this handy "with" statement (just like the one in Visual Basic), this allows us to repeatedly access the values inside our "Select1" box. (That's what we named our drop-down box)
   
   with(document.form1.Select1){
   
   
5. Loop through our Select1 box - to get at each and every option that might be selected
   
   length is a property of all arrays - every array has a length - the number of items in the array. Once we declare an item as an array we are automatically given this property.
   
   we can access the length just using the word "length" because we are using it within our "with" function - so javascript knows to look at that "Select1" box
   
   for(var loop_index = 0; loop_index < length; loop_index++){
   
   

6. All select - "multiple" drop-down boxes have a "selected" property that we get to use. Once we declare our drop-down box as a type "select", then we can find out the index number of the item that was selected. (Javascript gods were nice to us)
   
   <SELECT NAME = Select1 onChange = selectionMade() MULTIPLE>
   
   

   if (options[loop_index].selected){

   
   
7. our global variable "newText" is now going to be set equal to whatever text is in that options() array that was selected... -- No, it doesn't have a ".value" like other textboxes, it has ".text". (javascript gods forgot what they named everything else)
   
   One more thing - that I didn't fix (on purpose). I didn't declare my array or give it null values to begin with. In javascript - variables DO NOT have to be declared. -- Makes it hard if you have a typo and your functions aren't working. You could have just mistakenly misspelled your variable and you will never know ..... unless.... you check your answers.
   
   

   newText = options[loop_index].text + newText

8. I add the text in that selected option to the text that was already selected, over and over every time one option gets selected. I do it in this same line. Do you see it??? It's the + newText. Since we are inside this function everytime an option gets selected, we keep adding to that "newText" variable over and over as long as we are on this page.
   
   
   

   newText = options[loop_index].text + newText

9. Now I just stick it all inside my textArea.
   
   document.form1.Textarea.value = newText