Добавить значение формы выбора в текстовое поле с помощью jQuery

Question

Как я могу добавить (а не заменить) значение select вход в textarea,

Например, у меня есть:

HTML

<textarea id="text"></textarea>
<select id="test">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>

Если я напишу "Stackru" в textareaтогда я выбираю Foo в select вход, textarea контент должен стать "Stackru foo".

Я пытался сделать следующее

Javascript

$("#text").val()

Но, похоже, он заменяет содержимое текстовой области вместо добавления значений.

Answer 1

$('#test').on('change',function(){
 var test = this;
 $('#text').val(function(_,v){
     return v + test.value;
 })
})

Answer 2

Просто получите текущее значение и добавьте к нему

$("#text").val($("#text").val() + "Foo");

или даже лучше использовать append()

$("#text").append("Foo");

Answer 3

$(document).ready(function(){
    $("#test").change(function(){
        var textAreaContent = $("#text").val();  //VALUE OF TEXTAREA
        var selectBoxVal = $(this).val();    //VALUE OF SELECT BOX
       $("#text").val(textAreaContent+" "+selectBoxVal);   //ADD THE VALUE INSIDE TEXTAREA
    });
});

Answer 4

Вы можете сделать это используя .val (function (index, value)):

$("#text").val(function (_, oldValue) {
    return oldValue + $('#test').val();
});

Answer 5

Попробуйте следующее, каждый раз значение select входные изменения, его выбранный текст опции добавляется к textarea:

JavaScript / JQuery

$('#test').change(function(){
    $('#text').val($('#text').val()+" "+$('#test option:selected').text());
});

Посмотреть это демо

Answer 6

Просто в onChange функция select box записывать

$('#text').val($('#text').val()+'Foo');