基于下拉选择的文本加载到文本区域

Question

首先，我搜索了这个网站，发现如下：

How to fill in a text field with drop down selection

但是它不适合我的需要，因为我正在生成非常长的模板，而且上面的方法太费时，不切实际，因为它意味着用模板填充每个<option>标记的<option>属性。

下面是代码：

<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>

下面是标记：

<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-->

最糟糕的是，当我测试这个时，我甚至没有得到一个脚本错误，只是它根本不起作用，所以我不知道我哪里出错了。我使用<input type="text">标记做了一个类似的页面，它们工作得很好，但是无论我尝试什么，我似乎都无法让它与<textarea>一起工作。

任何帮助都将非常感谢！提前感谢！

编辑于2011年9月2日星期五下午01:17:34

为了澄清上面我说的“我在测试时甚至没有得到一个脚本错误，它根本不起作用，”

我的意思是，如果我把模板放在一行上，

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

那我就不会出差错了。但是，如果我输入了断行符来格式化，如上面所示：

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

然后我得到一个“未终止的字符串常量”错误。使用\n会解决这个错误吗？而且，我没有把它写在脚本中，因为我不知道该如何处理，但是在<textarea>中，它说

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

[CSTemplates] 

drop-down list.

当用户从下拉列表中选择一个选择时，我需要擦除，并让<textarea>从脚本中填充相应的选择。谢谢!

Answer 1

好的，您在代码中遇到了很多问题，主要的问题是在选项中指定onchange，而不是选择，我也解决了一些小问题，下面是一个工作示例http://jsfiddle.net/gKsdK/1/。

这是标记

<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-->

这是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;   
 } 
}

Answer 2

您已经将onchange事件绑定在option上而不是select上。

Answer 3

如果您想要在几行上有一个字符串，就必须将它连接起来：

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

\n在这里只是为了在您的代码中创建断线。

如果要更改文本区域的内容，请使用属性.value而不是.innerHTML！