使用jQuery将选择表单值添加到textarea中

Question

如何将select输入的值添加（而不是替换）到 a textarea。

例如，我有：

HTML

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

如果我在textarea中写“Stackoverflow”，那么我在select输入中选择 Foo ，textarea内容应该成为“Stackoverflow foo”。

我尝试过以下

的Javascript

$("#text").val()

但它似乎取代了textarea的内容而不是添加值。

Answer 1

获取当前值并添加到其中

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

或更好使用append()

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

Answer 2

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

Answer 3

您可以使用.val( function(index, value) )执行此操作：

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

Answer 4

尝试以下操作，每当select输入值更改时，其选定的选项文字就会添加到textarea：

的JavaScript / jQuery的

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

See this demo

Answer 5

$(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 6

只需onChange函数select box写

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