jQuery - Copy / move text from select list to textarea

问题

The img below describes what I am trying to do:

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

Any ideas, resources?

回答1:

When the button is clicked you can just 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 only add text to a textarea, it doesn't render html tags (so a list inside it won't work). I used \n to create newlines.

Fiddle

Here's a working fiddle

回答2:

I give you an example, simple one:

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/

回答3:

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

use this

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

来源：https://stackoverflow.com/questions/12365049/jquery-copy-move-text-from-select-list-to-textarea

标签

jquery

select

textarea