复杂的Javascript和HTML问题,<;选择>;及<;textarea>;
假设我有多个选择框,其中的选项具有不同的选项。单击后,我希望将值传输到textarea。我将尝试用图像显示它们复杂的Javascript和HTML问题,<;选择>;及<;textarea>;,javascript,html,textarea,css-selectors,Javascript,Html,Textarea,Css Selectors,假设我有多个选择框,其中的选项具有不同的选项。单击后,我希望将值传输到textarea。我将尝试用图像显示它们 假设您的textarea的ID为“text”: (注意:这使用了,这使事情变得更简单。请参阅下面的小节了解非jQuery解决方案): 但这将替换文本区域内的所有文本。如果只想将其添加到末尾(带有空格),则: 纯Javascript解决方案: var selects = document.getElementsByTagName('select'), textarea = do
假设您的textarea的ID为“text”: (注意:这使用了,这使事情变得更简单。请参阅下面的小节了解非jQuery解决方案): 但这将替换文本区域内的所有文本。如果只想将其添加到末尾(带有空格),则:
纯Javascript解决方案:
var selects = document.getElementsByTagName('select'),
textarea = document.getElementById('text');
for (var i = 0, select; select = selects[i]; i++) {
select.selectedIndex = -1;
select.onchange = (function (s) {
return function () {
textarea.value +=
' ' + s.options[s.selectedIndex].innerHTML;
s.selectedIndex = -1;
};
})(select);
}
演示:也可以不使用jQuery,而且不太复杂 有这个JS:
<script type="text/javascript">
function CopyValues(oDDL, sTargetId) {
var arrValues = new Array();
for (var i = 0; i < oDDL.options.length; i++) {
var curOption = oDDL.options[i];
if (curOption.selected)
arrValues.push(curOption.value);
}
document.getElementById(sTargetId).value = arrValues.join("\n");
}
</script>
每当用户单击下拉列表时,所选值将被复制到具有给定ID的textarea,例如:
<textarea id="txtData"></textarea>
实时测试用例:您应该添加您正在使用jQuery(OP根本没有提到jQuery)。也许你也应该提供一个非jQuery的答案。@Dugi,很抱歉我使用了jQuery库。我将使用纯javascript解决方案更新我的答案@费利克斯,干杯,你完全正确,我一点也没注意到。谢谢:),非常棒。这工作非常棒!!!谢谢但是,是否有任何调整可以在不删除当前文本的情况下将当前文本保留在文本区域并添加选项值?@Dugi没问题。。要追加而不是覆盖,只需添加这个小加号:
document.getElementById(sTargetId).value+=arrValues.join(“\n”)虽然我不明白你为什么需要这样的东西。。
<script type="text/javascript">
function CopyValues(oDDL, sTargetId) {
var arrValues = new Array();
for (var i = 0; i < oDDL.options.length; i++) {
var curOption = oDDL.options[i];
if (curOption.selected)
arrValues.push(curOption.value);
}
document.getElementById(sTargetId).value = arrValues.join("\n");
}
</script>
<select multiple="multiple" onclick="CopyValues(this, 'txtData');">
<textarea id="txtData"></textarea>