Question

求一段JS特效，将一个下拉菜单的选中的值通过按钮添加到多行文本框

要求1、可以添加多个选中的下拉菜单
2、可以移除多行文本选中的文本
基本效果图如下图

Answer 1

<tr>
<td align="center" class="tableHeader3-wn">所属类别</td>
<td class="tableHeader3-wn" align="left">
<table>
<tr>
<td>
<select id="srcList" name="srcList" multiple="multiple" size="12" ondblclick="addSort()">
<option value="1">VALUE1</option>
<option value="2">VALUE2</option>
<option value="3">VALUE3</option>
<option value="4">VALUE4</option>
</select>
</td>
<td>
<a href="#" onclick="addSort()" style="height:20px;border: 1px solid #99BBE8;margin:auto; padding:0px; text-align:center;
width:30px; display:block; background-image:url(${ctx}/images/button.gif);
text-decoration:none; font-size:14px; color:#282523; padding-top:4px;">添加</a> 
<a href="#" onclick="deleteSort()" style="height:20px;border: 1px solid #99BBE8;margin:auto; padding:0px; text-align:center;
width:30px; display:block; background-image:url(${ctx}/images/button.gif);
text-decoration:none; font-size:14px; color:#282523; padding-top:4px;">移除</a>
</td>
<td>
<select id="destList" name="destList" multiple="multiple" size="12" ondblclick="deleteSort()">
</select>
</td>
</tr>
</table>

</td>

</tr>

<script
type="text/javascript">
function addSort(){
var src = document.getElementById('srcList');
var dest = document.getElementById('destList');

for (var i = 0; i < src.options.length; i++)
{
if (src.options[i].selected)
{
var exist = false;
for (var j = 0; j < dest.options.length; j++)
{
if (dest.options[j].value == src.options[i].value)
{
exist = true;
break;
}
}
if (!exist)
{
var opt = document.createElement('OPTION');
opt.value = src.options[i].value;
opt.text = src.options[i].text;
dest.options.add(opt);
}
}
}
}
/** 删除分类 */
function deleteSort(){
var dest = document.getElementById('destList');

for (var i = dest.options.length - 1; i >= 0 ; i--)
{
if (dest.options[i].selected)
{
dest.options[i] = null;
}
}
}

</script>

Answer 2

将数据保存到list<string> 中，添加用add方法，移除用remove方法，每次按钮点过之后刷新页面重新绑定这个list即可。

有不懂的，请追问。。。

本人愚见，针对该问题希望能对你有所帮助。。。

追问

你给的思路很清晰，但是我js学的不好，简单能看懂修改，但是写不出代码，希望能给出代码！
谢谢了

Answer 3

1、使用下拉列表框绑定数据
2、创建添加方法和删除方法
3、在文本框中调用以上方法

Answer 4

路过。。。。