如何实现如下功能
2024-05-04 22:54:41
供稿：网友
菜鸟学堂：
php代码:--------------------------------------------------------------------------------
脚本说明:
把如下代码加入<body>区域中
<script language="javascript">
<!-- begin
oldvalue = "";
function passtext(passedvalue) {
if (passedvalue != "") {
var totalvalue = passedvalue+"/n"+oldvalue;
document.displayform.itemsbox.value = totalvalue;
oldvalue = document.displayform.itemsbox.value;
}
}
// end -->
</script>
<form name="selectform">
<select name="dropdownbox" size=1>
<option value="">请选择</option>
<option value="第一项">第一项</option>
<option value="第二项">第二项</option>
<option value="第三项">第三项</option>
<option value="第四项">第四项</option>
<option value="第五项">第五项</option>
<option value="第六项">第六项</option>
</select>
<input type=button value="添加到列表中" onclick="passtext(this.form.dropdownbox.options[this.form.dropdownbox.selectedindex].value);">
</form>
<form name="displayform" >
<font face="arial, helvetica, sans serif" size="3"><b>你可以自己选择一下:</b></font><br>
<textarea cols="30" rows="5" name="itemsbox" >
php代码:--------------------------------------------------------------------------------
脚本说明:
把如下代码加入<body>区域中
<script language="javascript">
<!-- begin
var delimiter = ":";
function moveoption (movefrom, moveto, todo) {
var selectfrom = eval('document.main_form.'+movefrom);
var selectto = eval('document.main_form.'+moveto);
var selectedindex = selectfrom.options.selectedindex;
var container;
if (todo=='add') {
container=eval('document.main_form.'+todo+moveto);
}
if (todo=='remove') {
container=eval('document.main_form.'+todo+movefrom);
}
if (selectedindex == -1) {
alert("请选择一个用户");
} else {
for (i=0; i<selectfrom.options.length; i++) {
if(selectfrom.options[i].selected) {
var name = selectfrom.options[i].text;
var id = selectfrom.options[i].value;
selectfrom.options[i] = null;
selectto.options[selectto.options.length]=new option (name,id);
i=i-1;
if(todo=='add'||todo=='remove') {
container.value=container.value+name+delimiter;
//container.value=container.value+id+delimiter;
}
}
}
}
}
function checkduplicates (addlistcontainer, removelistcontainer) {
var addlist = eval('document.main_form.'+addlistcontainer);
var removelist = eval('document.main_form.'+removelistcontainer);
var tempaddlist = addlist.value;
var tempremovelist = removelist.value;
if (tempaddlist>''&&tempremovelist>'') {
tempaddlist = tempaddlist.substring(0,tempaddlist.length-1);
tempremovelist = tempremovelist.substring(0,tempremovelist.length-1);
var addarray = tempaddlist.split(delimiter);
var removearray = tempremovelist.split(delimiter);
for (i=0; i<addarray.length; i++) {
for (j=0; j<removearray.length; j++) {
if (addarray[i]==removearray[j]) {
addarray[i]='';
removearray[j]='';
break;
}
}
}
addlist.value='';
for (i=0; i<addarray.length; i++) {
if (addarray[i]>'') {
addlist.value = addlist.value + addarray[i] + delimiter;
}
}
removelist.value='';
for (i=0; i<removearray.length; i++) {
if (removearray[i]>'') {
removelist.value = removelist.value + removearray[i] + delimiter;
}
}
}
}
function lockchanges() {
checkduplicates('addadmins','removeadmins');
checkduplicates('addusers','removeusers');
}
// end -->
</script>
<table align="center">
<tr><td>
<form name=main_form action="" method=post><input type=hidden name=addadmins>
<input type=hidden name=removeadmins> <input type=hidden name=addusers> <input
type=hidden name=removeusers>
<div align="center">
<table cellspacing="0" cellpadding="5" border="0">
<tbody>
<tr>
<td valign="top" align="middle" rowspan="2">备选用户<br><select multiple size="12" name="employees">
<option>employee_01<option>employee_02<option>employee_03<option>employee_04<option>employee_05<option>employee_06<option>employee_07<option>employee_08<option>employee_09<option>employee_10</option></select>
</td>
<td>
<p align="center"><input onclick="moveoption('employees','admins','add');" type="button" value="增加admin >>" name=add_admin>
</p>
<p align="center"><input onclick="moveoption('admins','employees','remove');" type="button" value="<< 删除admin" name="remove_admin">
</p></td>
<td valign="top" align="middle">administrators<br><select multiple size="5" name="admins">
<option>admin_01<option>admin_02<option>admin_03<option>admin_04<option>admin_05</option></select>
</td></tr>
<tr>
<td>
<p align="center"><input onclick="moveoption('employees','users','add');" type="button" value="增加user >> " name=add_user>
</p>
<p align="center"><input onclick="moveoption('users','employees','remove');" type="button" value=" << 删除user " name="remove_user">
</p></td>
<td valign="top" align="middle">users<br><select multiple size="5" name="users">
<option>user_01<option>user_02<option>user_03<option>user_04<option>user_05</option></select>
</td></tr>
</tbody>
</table>
</div>
</form>
</td></tr>
<tr><td>
<div align="center"><input onclick="lockchanges();" type="button" value="保存修改"></div>
<br>
<div align="center">
<a href="java script:alert(document.main_form.addadmins.value);">查询增加的admin</a>
<br>
<a href="java script:alert(document.main_form.removeadmins.value);">查询删除的admin</a>
<br>
<a href="java script:alert(document.main_form.addusers.value);">查询增加的user</a>
<br>
<a href="java script:alert(document.main_form.removeusers.value);">查询删除的user</a>
</div>
</td></tr>
</td></tr>
</table>
php代码:--------------------------------------------------------------------------------
脚本说明：
把如下代码加入<body>区域中:
<script language="javascript">
<!-- begin
sortitems = 1; // automatically sort items within lists? (1 or 0)
function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
bumpup(fbox);
if (sortitems) sortd(tbox);
}
function bumpup(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=i; j<box.options.length-1; j++) {
box.options[j].value = box.options[j+1].value;
box.options[j].text = box.options[j+1].text;
}
var ln = i;
break;
}
}
if(ln < box.options.length) {
box.options.length -= 1;
bumpup(box);
}
}
function sortd(box) {
var temp_opts = new array();
var temp = new object();
for(var i=0; i<box.options.length; i++) {
temp_opts[i] = box.options[i];
}
for(var x=0; x<temp_opts.length-1; x++) {
for(var y=(x+1); y<temp_opts.length; y++) {
if(temp_opts[x].text > temp_opts[y].text) {
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
temp = temp_opts[x].value;
temp_opts[x].value = temp_opts[y].value;
temp_opts[y].value = temp;
}
}
}
for(var i=0; i<box.options.length; i++) {
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
}
}
// end -->
</script>
<form action="" method="post">
<table border="0">
<tr>
<td><select multiple size="5" name="list1">
<option value="11"> item 1.1 </option>
<option value="12"> item 1.2 </option>
<option value="13"> item 1.3 </option>
</select></td>
<td>
<input type="button" value=" >> " onclick="move(this.form.list1,this.form.list2)" name="b1"><br>
<input type="button" value=" << " onclick="move(this.form.list2,this.form.list1)" name="b2">
</td>
<td><select multiple size="5" name="list2">
<option value="21"> item 2.1 </option>
<option value="22"> item 2.2 </option>
<option value="23"> item 2.3 </option>
</select></td>
</tr>
</table>
</form>
