Сложный вопрос Javascript и HTML, <select>и <textarea>

Question

Допустим, у меня есть несколько полей выбора с параметрами, которые имеют различные параметры. При нажатии я хочу, чтобы значения переносились в текстовую область. Я постараюсь показать их в изображениях.

Answer 1

Возможно и без 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');">

И всякий раз, когда пользователь щелкает раскрывающийся список, выбранные значения будут копироваться в текстовое поле с заданным идентификатором, например:

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

Тестовый пример: http://jsfiddle.net/yahavbr/UBwML/

Answer 2

Предполагается, что у вашей текстовой области есть идентификатор "text":

( Примечание: здесь используется jQuery framework , что значительно упрощает процесс. Решение для не-jQuery см. Ниже):

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

Это заменит любой текст, уже находящийся внутри текстовой области. Если вы хотите просто добавить его в конец (с пробелом), то:

$('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/