使用 jquery 在文本区域中添加和删除选择值

Question

我有一个文本区域、一个选择列表和两个按钮：- 添加和删除

单击添加按钮时，我想将选择列表值添加到 textarea 和 删除按钮单击我想删除从文本区域中选择的文本。 并单击文本区域，我希望选择相应的添加选择项（以便我可以单击删除按钮将其删除） 请帮我解决这个问题。

<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>

谢谢，

德文

Answer 1

使用 jQuery，您可以通过这样做（轻松）获得这种方法：

1. 有两个数组 - 选定/最终
2. 所有选定的值都应放在“选定”数组中
3. 不要使用 textarea 而是使用 div 部分。
4. 将这些选定项填充为 div 部分内的 ul/li 列表（使用 for 循环）
5. $("#divId").append("<ul id='someuniqueId1'><li>..</li></ul>")
6. 现在，每当用户单击时，在 js/css 的帮助下，应用 css（突出显示）+ 将此选定项添加到“最终”数组中
7. $("#divId #someuniqueId1").css("highlight")
8. final[someuniqueId1] = $("#divId #someuniqueId1").children("li").html()
9. 第 5 点应继续，直到用户选择列表。
10. 要取消选择，请使用“.toggle”并反转操作 - 使用另一个名为 normal 的 CSS，如果列表从选择变为取消选择，则应用此选项 + 从“最终”数组中删除此项。
11. $("#divId #someuniqueId1").css("unhighlight")
12. delete(final['someuniqueId1']) - 确保它有效
13. “最终”数组包含所有选定的项目。

Answer 2

在添加点击时：

$('textarea').val($('select').val());

删除点击时：

$('textarea').val('');