根据下拉选择将文本加载到textarea中

时间:2011-09-02 16:06:32

标签: javascript drop-down-menu textarea onchange selectedindex

首先,我搜索了网站,发现了这个:

How to fill in a text field with drop down selection

但它不符合我的需要,因为我生成了很长的模板而且上面的方法太耗时且不切实际,因为这意味着要填写每个value的{​​{1}}属性用我的模板标记。

所以这是代码:

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

非常感谢任何帮助!提前谢谢!

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

为了澄清以上所说的“当我测试它时,我甚至没有收到脚本错误,它根本不起作用,”

我的意思是,如果我将模板全部放在一行上,即

<textarea>

然后我没有收到错误。如果我按照上面的格式输入换行符:

/*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. 填充脚本中的相应选项。谢谢!

3 个答案:

答案 0 :(得分:3)

好的,你在代码中遇到很多问题,主要的是在选项中指定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;   
 } 
}

答案 1 :(得分:2)

您已在onchange而非option上绑定select个活动。

答案 2 :(得分:1)

如果你想在几行上有一个字符串,你必须连接它:

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

\ n 仅用于在您的。

中创建分隔线

如果您想更改textarea的内容,请使用属性 .value 而不是 .innerHTML