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