javascript - 使用 jquery 将所选字段放入 textarea

Question

我想从组合框中获取选定的选项以显示在文本区域中。 jsFiddle

这是html：

<select id="header-values" multiple="headervalues" style="width:200px" name="headervalues" >
                            <option selected="">MVA</option>
                            <option>Jet Ski</option>
                            <option>Bus Accident</option>
                            <option>Worker's Comp</option>
                            <option>field1</option>
                            <option>field2</option>
                            <option>field3</option>
                        </select>
                        <br>
                        <textarea id="headervalues-log" class="log" class="ui-widget-content"></textarea>

一旦我选择它显示的任何选项被插入到 textarea 中，如果我再次选择该选项，则应该出现下一个选项。

我尝试了以下代码但不起作用。无法弄清楚什么是错的，

/*$("select, #header-values").change(function(){
        var selecttext =$('#header-values : selected').val();
        var insertText = $(this).text();
        $('#headervalues-log').append(" "+insertText);
    });*/

$("select, #header-values").change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("headervalues-log").text(str);
})

Answer 1

你可以做：

$("#header-values").change(function() {
    var selOption = $(this).find(":selected").text();

    $("#headervalues-log").text(selOption);
});

演示：http: //jsfiddle.net/QJ6yQ/7/

在从文本区域中删除条目后在末尾添加此行以进行多项选择并选择一个字段。

 $("#headervalues-log").val(function() { 
     return this.value + selOption + ', ' }).prependTo("#headervalues-log");
 });

Answer 2

尝试这个：

$("select#header-values").change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("#headervalues-log").val(str);
})

在jsFiddle上查看

Answer 3

如果要从选择框中选择并删除，请使用以下 appendTo api

$('select option:selected').remove().appendTo($("#headervalues-log"));

其他明智的只使用 appendTo 追加

$('select option:selected').appendTo($("#headervalues-log"));