jquery - jQuery - 選択リストからテキストエリアにテキストをコピー/移動

Question

以下の画像は、私がやろうとしていることを説明しています:

したがって、選択リストからエントリが選択され、[コピー] ボタンが押されると、テキスト領域に < 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

ボタンをクリックすると、選択したオプションを 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は改行を作成していました。

フィドル

これが実用的なフィドルです