两个下拉框左框添加值右框删除值-优快云博客

本文介绍了一个简单的用户界面，用于从所有可用角色中选择并分配特定角色。通过两个下拉列表展示所有角色和已选角色，并提供了按钮来实现角色的添加与移除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<script language="javascript" type="text/javascript">
// <!CDATA[

function ctl00_content_UserRolesPopup1_Button1_onclick() {
var listAllRoles = document.getElementById("ctl00_content_UserRolesPopup1_ListAllRoles");
var listSelectedRoles = document.getElementById("ctl00_content_UserRolesPopup1_ListSelectedRoles");
for (var i = 0; i < listAllRoles.length; i ++) {
if (listAllRoles.options[i].selected) {
var ignore = false;
for (var j = 0; j < listSelectedRoles.options.length; j ++) {
if (listSelectedRoles.options[j].text == listAllRoles.options[i].text) {
ignore = true;
break;
}
}
if (!ignore) {
var newOption = new Option(listAllRoles.options[i].text, listAllRoles.options[i].value);
listSelectedRoles.options.add(newOption);
}
}
}
}

function ctl00_content_UserRolesPopup1_Button2_onclick() {
var listSelectedRoles = document.getElementById("ctl00_content_UserRolesPopup1_ListSelectedRoles");
var array1 = new Array();
for (var i = listSelectedRoles.options.length - 1; i >= 0; i --) {
if (listSelectedRoles.options[i].selected)
listSelectedRoles.options.remove(i);
}
}

// ]]>
</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;" οnclick="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;" οnclick="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>
以上代码可直接编辑使用！