根据下拉选择将文本加载到textarea中 [英] loading text into textarea based on drop down selection
问题描述
首先，我已经搜索了该站点并找到了它:
To start, I have searched the site and found this:
，但是它不符合我的需要，因为我生成的模板很长，并且上述方法将非常耗时且不切实际，因为这将意味着用我的模板填充每个<option>标签的value属性
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.
所以这是代码:
<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>一起使用.
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!
于2011年9月2日星期五下午01:17:34编辑
为澄清以上情况，我说了"":我在测试该脚本时甚至没有遇到脚本错误，这根本不起作用，"
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. ",
然后出现未终止的字符串常量"错误.使用\n是否可以解决此错误?另外，我将其遗漏在脚本之外，因为我不知道如何处理它，而是在<textarea>它说的地方
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.
当用户从下拉列表中选择一个选项时，我需要擦除，并且<textarea>要使用脚本中的相应选择来填充.谢谢！
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!
推荐答案
好吧，您在代码中遇到了很多问题，主要是在选项中指定了onchange而不是selects，我解决的问题也很少，这是一个可行的示例 http://jsfiddle.net/gKsdK/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/
这是标记
<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;
}
}
这篇关于根据下拉选择将文本加载到textarea中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
