JQuery - copy / move text from a select list to a text field

Question

The following is an img example that I am trying to do:

So, when an entry is selected from the selection list and the "Copy" button is pressed, it will add <li> to the text area.

Any ideas, resources?

Answer 1

When the button is pressed, you can simply read the selected option using jQuery and add it to the text area.

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

You can add text to the text field, it does not display html tags (so the list inside it will not work). I used \n to create new lines.

Fiddle

Here is a working fiddle

Answer 2

I will give you an example, simple:

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

Demo: http://jsfiddle.net/pf5CU/

Update

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

Answer 3

link http://jsfiddle.net/pf5CU/43/

use this

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