复杂的Javascript和HTML问题，<select>和</select> <textarea> </textarea>

Question

假设我有多个选择框，其中包含具有不同选项的选项。点击后，我希望将值传输到textarea。我会尝试在图像中显示它们。

Answer 1

假设您的textarea的ID为“text”：

（注意：这会使用jQuery framework，这会让事情变得更加容易。请参阅下一节了解非jQuery解决方案）：

$('select').change(function () {
    $('#text').val($(this).find('option:selected').text());
});

这将替换textarea中已有的任何文本。如果你想简单地将它添加到最后（带空格），那么：

$('select').change(function () {
    $('#text').val($('#text').val() + ' ' + $(this).find('option:selected').text());
});

---

纯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);
}

演示：http://jsfiddle.net/Gdp6p/

Answer 2

可能没有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>

从select标记内激活，如下所示：

<select multiple="multiple" onclick="CopyValues(this, 'txtData');">

每当用户点击下拉列表时，所选的值将被复制到具有给定ID的textarea，例如：

<textarea id="txtData"></textarea>

实时测试案例：http://jsfiddle.net/yahavbr/UBwML/