loading text into textarea based on drop down selection

问题

To start, I have searched the site and found this:

How to fill in a text field with drop down selection

but it did not suit my needs, as I'm generating very long templates and the above method would be too time consuming and impractical as it would mean filling in the value attribute of each <option> tag with my templates.

So here's the code:

<script type="text/javascript">
//<![CDATA[ 
function showCSTemplates(sel){   

locations =[ "", /*this remains blank for first selection in drop-down list*/ 

/*option 1*/                 
" This is template 1 that  will appear in a
textarea keeping 
its formatting 
as  
is. ",

/*option 2*/                
" This is template 2 that 
 will appear in a
 textarea keeping its 
 formatting as  is.

Credentials:  
Contact Info: ",

/*option 3*/                 
" This is template 3 that  will appear in a
textarea keeping its formatting as  is.

Donec tortor lorem,  
ornare vitae commodo nec,  
sagittis et nunc. 
Maecenas sagittis quam ",

/*option 4*/                 
"etc",

/*option 5*/                 
"etc...", ];
                        srcLocation = locations    [sel.selectedIndex];         
                        if (srcLocation != undefined && srcLocation != "") {      
                  document.getElementById('CSTemplates').innerHTML = srcLocation;   
 } 
}  //]]>
</script>

and here's the markup:

<h1>Note Generator</h1>

<div class="left">
CSTemplates
<p>
<select class="c10"> 
<option selected="selected" value="" id="Templates" onchange="showCSTemplates(this);">Please select a template...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<textarea cols="30" rows="20" readonly="readonly" id="CSTemplates">
Templates will auto-populate 
here depending on the 
selection made from the 

[CSTemplates] 

drop-down list.
</textarea>
</p>
</div><!--left ends here-->

The worst part is, I'm not even getting a script error when I test this, it just doesn't work at all, so I don't know where I went wrong here. I've done a similar page using <input type="text"> tags and they worked fine, but I can't seem to get it to work with the <textarea> at all no matter what I try.

Any help will be very much appreciated! Thanks in advance!

Edited on Fri September 2, 2011 at 01:17:34 PM

To clarify the above where I said "I'm not even getting a script error when I test this, it just doesn't work at all,"

what I mean was, if I leave the templates all on one line i.e.

/*option 1*/                 
" This is template 1 that  will appear in a textarea keeping its formatting as is. ",

then I don't get an error. If I enter line breaks however for formatting like above:

/*option 1*/                 
" This is template 1 that  will appear in a
textarea keeping 
its formatting 
as  
is. ",

then I get an "Unterminated string constant" error. Would using \n solve this error? Also, I left it out of the script because I don't know how to go about it, but in the <textarea> where it says

Templates will auto-populate 
here depending on the 
selection made from the 

[CSTemplates] 

drop-down list.

I need to erase when the user picks a selection from the dropdownlist, and for the <textarea> to populate with the corresponding selection from the script. Thanks!

回答1:

Okay you had many problems in code the major one was specifying onchange in option instead of selects, there also little problem which I solved and here is a working example http://jsfiddle.net/gKsdK/1/

Here is the markup

<h1>Note Generator</h1>

<div class="left">
CSTemplates
<p>
<select class="c10" onchange="showCSTemplates(this);"> 
<option selected="selected" value="" id="Templates">Please select a template...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<textarea cols="30" rows="20" readonly="readonly" id="CSTemplates">
Templates will auto-populate 
here depending on the 
selection made from the 

[CSTemplates] 

drop-down list.
</textarea>
</p>
</div><!--left ends here-->

Here is the JS

function showCSTemplates(sel){   

locations =[ "", /*this remains blank for first selection in drop-down list*/ 

/*option 1*/                 
" This is template 1 that  will appear in a textarea keeping its formatting as  is. ",

/*option 2*/                
" This is template 2 that  will appear in a textarea keeping its  formatting as  is. Credentials:  Contact Info: ",

/*option 3*/                 
" This is template 3 that  will appear in a textarea keeping its formatting as  is. Donec tortor lorem,  ornare vitae commodo nec,  sagittis et nunc. Maecenas sagittis quam ",

/*option 4*/                 
"etc",

/*option 5*/                 
"etc...", ];
                   srcLocation = locations    [sel.selectedIndex];        
   if (srcLocation != undefined && srcLocation != "") {      
                  document.getElementById('CSTemplates').innerHTML= srcLocation;   
 } 
}

回答2:

You have bound the onchange event on option instead of select.

回答3:

If you want to have a string on several lines, you have to concatenate it:

/*option 1*/                 
" This is template 1 that  will appear in a \n"+
"textarea keeping \n"+
"its formatting \n"+
"as \n"+  
"is. \n",

The \n are here only to create the breaklines into your .

And if you want to change the contents of a textarea, use the property .value and not .innerHTML !

来源：https://stackoverflow.com/questions/7286212/loading-text-into-textarea-based-on-drop-down-selection

标签

javascript

drop-down-menu

textarea

onchange

selectedindex