javascript两个select控件内容互相移动

最新推荐文章于 2018-12-13 00:49:25 发布

原创最新推荐文章于 2018-12-13 00:49:25 发布 · 480 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #function #input #html #border

JavaScript 专栏收录该内容

55 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现从一个下拉列表框(select)向另一个下拉列表框转移选项的功能。通过按钮操作，可以将选项单个或全部转移，适用于表单数据的选择与配置场景。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body> <mce:script language="javascript"></mce:script> <body> <table width="27%" height="194" border="0" cellpadding="1" cellspacing="0"> <tr> <td width="21%"><select id="selectfrom" size="15" multiple="multiple" style="width:100px"> <option>a</option> <option>b</option> <option>c</option> <option>d</option> <option>e</option> <option>f</option> <option>g</option> <option>h</option> <option>i</option> <option>j</option> <option>k</option> <option>j</option> <option>m</option> <option>n</option> </select></td> <td width="57%"><p align="center"> <input name="addAll" type="button" id="addAll" value=" >> " style="width:40px" onclick="addAll()"/> </p> <p align="center"> <input name="add" type="button" id="add" style="width:40px" value=" > " onclick="add()"/> </p> <p align="center"> <input name="del" type="button" id="del" value=" < " style="width:40px" onclick="del()"/> </p> <p align="center"> <input name="delAll" type="button" id="delAll" value=" << " style="width:40px" onclick="delAll()"/> </p></td> <td width="22%"><select id="select2" size="15" multiple="multiple" style="width:100px"> </select></td> </tr> </table> </body> </html>