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

Question

下面的img描述了我想要做的事情：

因此，当选择一个来自选择列表的条目并按下“复制”按钮时，它将添加一个＆lt; li>元素到文本区域。

任何想法，资源？

Answer 1

我举一个简单的例子：

HTML code：

<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

单击该按钮时，您可以使用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);
});​

您只能将文本添加到textarea，它不会呈现html标记（因此其中的列表将无效）。我使用\n来创建换行符。

<强>小提琴

Here's a working fiddle

Answer 3

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

使用此

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