右键菜单与列表框-优快云博客

[color=blue][u]右键弹出菜单：[/u][/color]

//-----------------------------------------------------

//右键弹出菜单
function showMenu(obj){

document.getElementById("sltid").value = obj;
var menudiv = document.getElementById("itemMenu");
popMenu(itemMenu,150,"111");
event.returnValue=false;
event.cancelBubble=true;
return false;
}

function popMenu(menuDiv,width,rowControlString){

//创建弹出菜单
var pop=window.createPopup();
//设置弹出菜单的内容
pop.document.body.innerHTML=menuDiv.innerHTML;
var rowObjs=pop.document.body.all[0].rows;
//获得弹出菜单的行数
var rowCount=rowObjs.length;
//循环设置每行的属性
for(var i=0;i<rowObjs.length;i++)
{
//如果设置该行不显示，则行数减一
var hide=rowControlString.charAt(i)!='1';
if(hide){
rowCount--;
}
//设置是否显示该行
rowObjs[i].style.display=(hide)?"none":"";
}

//屏蔽菜单的菜单
pop.document.οncοntextmenu=function()
{
return false;
}

//选择右键菜单的一项后，菜单隐藏
pop.document.οnclick=function()
{
pop.hide();
}
//显示菜单
pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);
return true;

}

</script>

<div id="itemMenu" style="display:none">

<table border="1" width="100%" height="100%" bgcolor="white"style="border:thin" cellspacing="0">
<tr>
<td style="cursor:hand;border:outset 1;" align="center"
οnclick="parent.addToOther();parent.refre();">
<font size="2px">添加至其他节点</font>
</td>
</tr>
<tr>
<td style="cursor:hand;border:outset 1;" align="center"
οnclick="parent.view()">
<font size="2px">查看</font>
</td>
</tr>
<tr>
<td style="cursor:hand;border:outset 1;" align="center"
οnclick="parent.del();parent.refre();">
<font size="2px">删除</font>
</td>
</tr>
</table>
</div>

[u][color=blue]双向选择列表：[/color][/u]

转自：http://blog.youkuaiyun.com/zhangking/archive/2008/10/27/3155401.aspx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>

<form id="frm" name="frm" method="post" action="" onSubmit="Submit(this)">

<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="220" align=center valign="top">
待分配的角色：<br><br>
<select name="WaitSelectItem" id="WaitSelectItem" size=15 multiple="true" style="width:180px;" οndblclick="MoveSingleItem(WaitSelectItem, SelectedItem)">
<option value="">待分配的角色-1</option>
<option value="">待分配的角色-2</option>
<option value="">待分配的角色-3</option>
<option value="">待分配的角色-4</option>
<option value="">待分配的角色-5</option>
<option value="">待分配的角色-6</option>
</select>
</td>
<td width="60" align=center>
<button onClick="MoveSingleItem(WaitSelectItem, SelectedItem)" style="width:40px;">></button><br><br>
<button onClick="MoveAllItems(WaitSelectItem, SelectedItem)" style="width:40px;">>></button><br><br>
<button onClick="MoveSingleItem(SelectedItem, WaitSelectItem)" style="width:40px;"><</button><br><br>
<button onClick="MoveAllItems(SelectedItem, WaitSelectItem)" style="width:40px;"><<</button><br><br>
</td>
<td width="220" align=center valign="top">
已分配的角色：<br><br>
<select name="SelectedItem[]" id="SelectedItem" size=15 multiple=true style="width:180px;" οndblclick="MoveSingleItem(SelectedItem, WaitSelectItem)">
<option value="">无</option>
</select>
</td>
</tr>
<tr height=120>
<td colspan=3 align=center>
<input type="submit" id="submit" name="submit" value=" 保存 ">
<button onClick="history.go(-1);"> 返回 </button>
</td>
</tr>
</table>
</form>

<script language="javascript">
function MoveSingleItem(sel_source, sel_dest)
{
if (sel_source.selectedIndex==-1) //源：没有点选任何项目
return;

if (sel_source.options[0].text=="无") //源：只有“无”项目
return;

if (sel_dest.options[0].text=="无") //目标：只有“无”项目，则先删除该提示性项目
sel_dest.options.remove(0);

var SelectedText = sel_source.options[sel_source.selectedIndex].text;
var SelectedVal = sel_source.options[sel_source.selectedIndex].value;
var newOption = new Option(SelectedText);
newOption.value = SelectedVal;
sel_dest.options.add(newOption);
sel_source.options.remove(sel_source.selectedIndex);

if (sel_source.options.length==0) //源：如果删除完所有有用项目，则添加提示项目：“无”
sel_source.options.add(new Option("无"));
}

function MoveAllItems(sel_source, sel_dest)
{
if (sel_source.options[0].text=="无") //源：只有“无”项目
return;

if (sel_dest.options[0].text=="无") //目标：只有“无”项目，则先删除该提示性项目
sel_dest.options.remove(0);

//首先拷贝所有项目到目标：
var sel_source_len = sel_source.length;
for (var j=0; j<sel_source_len; j++)
{
var SelectedText = sel_source.options[j].text;
var SelectedVal = sel_source.options[j].value;
var newOption = new Option(SelectedText);
newOption.value = SelectedVal;
sel_dest.options.add(newOption);
}

//然后删除“源”所有项目：
while ((k=sel_source.length-1)>=0)
{
if (sel_source.options[0].text=="无") //源：只有“无”项目
break;
sel_source.options.remove(k);
if (sel_source.options.length==0) //源：如果删除完所有有用项目，则添加提示项目：“无”
sel_source.options.add(new Option("无"));
}
}

function Submit(frm)
{
if (frm.SelectedItem.options[0].text!="无")
SelectAll(frm.SelectedItem);
frm.submit();
}

function SelectAll(theSel) //选中select中全部项目
{ for (i=0; i<theSel.length; i++)
theSel.options[i].selected = true;
}
</script>

</body>
</html>

JavaScript3