jQuery的 - 複製/從選擇列表中移動文本的textarea

Question

下IMG說明什麼，我試圖做的：

所以，當從選擇列表的條目被選擇按鈕「複製」是按下後，它會在文本區域添加一個< li>元素。

任何想法，資源？

Answer 1

點擊按鈕後，您可以使用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來創建換行符。

小提琴

Here's a working fiddle

Answer 2

我給你舉個例子，簡單：

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 3

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

使用本

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