两个下拉框左框添加值右框删除值

最新推荐文章于 2025-02-08 11:06:23 发布

原创最新推荐文章于 2025-02-08 11:06:23 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #function #xhtml #javascript #input #html

javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个用户角色选择器的实现方案，通过两个下拉列表分别展示所有可用的角色和已选中的角色，支持从所有角色中选择并添加到已选角色列表，同时也允许将已选角色移除。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <table width="500" border="0" cellpadding="0" cellspacing="1"> <tr> <td> <select size="4" name="ctl00$content$UserRolesPopup1$ListSelectedRoles" multiple="multiple" id="ctl00_content_UserRolesPopup1_ListSelectedRoles" style="height: 150px; width: 210px;"> </select> </td> <td align="center" style="width: 50px;"> <input type="submit" name="ctl00$content$UserRolesPopup1$Button1" value="<<" id="ctl00_content_UserRolesPopup1_Button1" style="font-family: SimSun;" mce_style="font-family: SimSun;" onclick="return ctl00_content_UserRolesPopup1_Button1_onclick()" /> <br /> <input type="submit" name="ctl00$content$UserRolesPopup1$Button2" value=">>" id="ctl00_content_UserRolesPopup1_Button2" style="font-family: SimSun;" onclick="return ctl00_content_UserRolesPopup1_Button2_onclick()" /> </td> <td align="right"> <select size="4" name="ctl00$content$UserRolesPopup1$ListAllRoles" multiple="multiple" id="ctl00_content_UserRolesPopup1_ListAllRoles" style="height: 150px; width: 210px;"> <option value="0f3e50fb-43e8-42ae-ac58-4f973de15091">Administrators</option> <option value="d259f6d2-84fd-4ed2-bebc-bdbd687da615">Guests</option> <option value="35f4bc1e-4e11-4bc5-ab3a-b53bf471197c">Power Users</option> <option value="e07e0a7f-ea0d-4e1c-86ba-42905ff72a5f">Users</option> </select> </td> </tr> </table> </body> </html>