Question

i have a textarea, a select list and two buttons:- add and remove

on clicking the add button i want to add the select list value to the textarea and on
remove button click i want to remove the text selected from the textarea.
and on a single click in the text area i want the corresponding added select item to be selected(so that i can click on remove button to remove it)
Please help me with this.

<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    <select>
</td>
</tr>
<tr>
<td><input type="button" value="Remove" style="width:110px" class="btn" id="remove"/></td>
<td  style="width:110px"></td>
<td><input type="button" value="Add" style="width:110px" class="btn" id="add"/></td>
</tr>
<tr>
    <td colspan="3">
        <textarea cols="45" rows="5" id="textarea"  readonly="true" ></textarea>
    </td>
</tr>
</table>

Thanks,

Devan

Answer 1

Using jQuery you can get this approach by doing this (easily):

1. Have two arrays – selected / final
2. All selected values should go inside “selected” array
3. Don’t use textarea but a div section.
4. Populate these selected item as ul/li list inside div section (using for loop)
5. $("#divId").append("<ul id='someuniqueId1'><li>..</li></ul>")
6. Now, with the help of js/css whenever user click, apply the css (highlight) + add this selected item inside “final” array
7. $("#divId #someuniqueId1").css("highlight")
8. final[someuniqueId1] = $("#divId #someuniqueId1").children("li").html()
9. Point 5 should continue until user select the list.
10. To unselect, use “.toggle” and reverse the action – have another css called normal & apply this if the list goes from select to deselect + remove this item from the “final” arry.
11. $("#divId #someuniqueId1").css("unhighlight")
12. delete(final['someuniqueId1']) – make sure this works
13. “Final” array has all the selected items.