jquery - jQuery - 将文本从选择列表复制/移动到 textarea

Question

下面的 img 描述了我正在尝试做的事情：

因此，当从选择列表中选择一个条目并按下“复制”按钮时，它将向文本区域添加一个 <li> 元素。

任何想法，资源？

Answer 1

我举个例子，简单的一个：

HTML 代码：

<select multiple="multiple" class="options">
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
    <option value="item4">Item 4</option>
    <option value="item5">Item 5</option>
</select>


<button id="test">Copy</button>

<textarea cols="25" rows="5" id="textarea"></textarea>

Javascript：

$(function(){
    $("#test").on("click", function(){
        $("#textarea").empty(); //to empty textarea content
        $(".options option:selected").each(function(){
           $("#textarea").append("* "+$(this).text()+ "\n");
        }); 
    });       
});

演示：http: //jsfiddle.net/pf5CU/

更新

http://jsfiddle.net/pf5CU/1/

Answer 2

链接http://jsfiddle.net/pf5CU/43/

用这个

       $("#textarea2").append('<option>'+$(this).text()+'</option>'); 
        $('option:selected', "#textarea").remove();

Answer 3

单击按钮时，您可以使用 jQuery 读取所选选项并将其添加到文本区域。

HTML

<select id="selectBox">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

<input id="copyBtn" type="button" value="copy" />

<textarea id="output">
    This is some intro text
</textarea>​

jQuery

$("#copyBtn").click(function(){
    var selected = $("#selectBox").val();
    $("#output").append("\n * " + selected);
});​

您只能将文本添加到文本区域，它不会呈现 html 标签（因此其中的列表不起作用）。我曾经\n创建换行符。

小提琴

这是一个工作小提琴