操控HtmlSelectBox - (多选/移动)
<HEAD>
<script language="javascript">
<!--
function AddItem(leftControl, rightControl)
{
Control1 = null;
Control2 = null;
Control1=leftControl;
Control2=rightControl;
var opt;
var j=Control1.length;
if(j==0) return;
for(j;j>0;j--)
{
if(Control1.options[j-1].selected==true)
{
opt = new Option();
opt.text =Control1.options[j-1].text;
opt.value=Control1.options[j-1].value;
Control2.options.add(opt);
Control1.options[j-1] = null;
}
}
}
function DelItem(leftControl, rightControl)
{
Control1 = null;
Control2 = null;
Control1=leftControl;
Control2=rightControl;
var opt;
var j=Control2.length;
if(j==0) return;
for(j;j>0;j--)
{
if(Control2.options[j-1].selected==true)
{
opt = new Option();
opt.text = Control2.options[j-1].text;
opt.value= Control2.options[j-1].value;
Control1.options.add(opt);
Control2.options[j-1]=null;
}
}
}
function MovItem(Control, Direction)
{
//Direction 0 -下移,非0上移
var opt;
var i=Control.length;
if(i==0) return;
if(Direction==0)
{
for(i;i>0;i--)
{
if(Control.options[i-1].selected==true)
{
opt = new Option();
opt.text = Control.options[i-1].text;
opt.value = Control.options[i-1].value;
var tmpOpt = new Option();
var j = i;
if(j >= Control.length) return;
//alert('I: ' + eval(i-1) + '/' + j);
tmpOpt.text = Control.options[j].text;
tmpOpt.value = Control.options[j].value;
Control.options[j].text = opt.text;
Control.options[j].value = opt.value;
Control.options[i-1].text = tmpOpt.text;
Control.options[i-1].value = tmpOpt.value;
//alert('II: ' + eval(i-1) + '/' + j);
Control.options[i-1].selected = false;
Control.options[j].selected = true;
}
}
}
else
{
for(i=0;i<Control.length;i++)
{
if(Control.options[i].selected==true)
{
opt = new Option();
opt.text = Control.options[i].text;
opt.value = Control.options[i].value;
var tmpOpt = new Option();
var j = i-1;
if(j<0) return;
tmpOpt.text = Control.options[j].text;
tmpOpt.value = Control.options[j].value;
Control.options[j].text = opt.text;
Control.options[j].value = opt.value;
Control.options[i].text = tmpOpt.text;
Control.options[i].value = tmpOpt.value;
Control.options[i].selected = false;
Control.options[j].selected = true;
}
}
}
}
function addwritetext(obj)
{
var s="";
for( i=0;i<obj.length;i++)
s=s+obj.options[i].text + ",";
s=s.substring(0,s.length-1);
return(s);
}
function addwritevalue(obj)
{
var s="";
for(i=0;i<obj.length;i++)
s=s+obj.options[i].value + ",";
s=s.substring(0,s.length-1);
return(s);
}
function OnSubmit(sel)
{
document.getElementById("hdnValue").value = addwritevalue(sel);
//alert(addwritetext(sel));
if(!confirm('真的要提交吗？'))
{
return(false);
}
}
//-->
</script>
</HEAD>
<script language="javascript">
<!--
function AddItem(leftControl, rightControl)
{
Control1 = null;
Control2 = null;
Control1=leftControl;
Control2=rightControl;
var opt;
var j=Control1.length;
if(j==0) return;
for(j;j>0;j--)
{
if(Control1.options[j-1].selected==true)
{
opt = new Option();
opt.text =Control1.options[j-1].text;
opt.value=Control1.options[j-1].value;
Control2.options.add(opt);
Control1.options[j-1] = null;
}
}
}
function DelItem(leftControl, rightControl)
{
Control1 = null;
Control2 = null;
Control1=leftControl;
Control2=rightControl;
var opt;
var j=Control2.length;
if(j==0) return;
for(j;j>0;j--)
{
if(Control2.options[j-1].selected==true)
{
opt = new Option();
opt.text = Control2.options[j-1].text;
opt.value= Control2.options[j-1].value;
Control1.options.add(opt);
Control2.options[j-1]=null;
}
}
}
function MovItem(Control, Direction)
{
//Direction 0 -下移,非0上移
var opt;
var i=Control.length;
if(i==0) return;
if(Direction==0)
{
for(i;i>0;i--)
{
if(Control.options[i-1].selected==true)
{
opt = new Option();
opt.text = Control.options[i-1].text;
opt.value = Control.options[i-1].value;
var tmpOpt = new Option();
var j = i;
if(j >= Control.length) return;
//alert('I: ' + eval(i-1) + '/' + j);
tmpOpt.text = Control.options[j].text;
tmpOpt.value = Control.options[j].value;
Control.options[j].text = opt.text;
Control.options[j].value = opt.value;
Control.options[i-1].text = tmpOpt.text;
Control.options[i-1].value = tmpOpt.value;
//alert('II: ' + eval(i-1) + '/' + j);
Control.options[i-1].selected = false;
Control.options[j].selected = true;
}
}
}
else
{
for(i=0;i<Control.length;i++)
{
if(Control.options[i].selected==true)
{
opt = new Option();
opt.text = Control.options[i].text;
opt.value = Control.options[i].value;
var tmpOpt = new Option();
var j = i-1;
if(j<0) return;
tmpOpt.text = Control.options[j].text;
tmpOpt.value = Control.options[j].value;
Control.options[j].text = opt.text;
Control.options[j].value = opt.value;
Control.options[i].text = tmpOpt.text;
Control.options[i].value = tmpOpt.value;
Control.options[i].selected = false;
Control.options[j].selected = true;
}
}
}
}
function addwritetext(obj)
{
var s="";
for( i=0;i<obj.length;i++)
s=s+obj.options[i].text + ",";
s=s.substring(0,s.length-1);
return(s);
}
function addwritevalue(obj)
{
var s="";
for(i=0;i<obj.length;i++)
s=s+obj.options[i].value + ",";
s=s.substring(0,s.length-1);
return(s);
}
function OnSubmit(sel)
{
document.getElementById("hdnValue").value = addwritevalue(sel);
//alert(addwritetext(sel));
if(!confirm('真的要提交吗？'))
{
return(false);
}
}
//-->
</script>
</HEAD>
<body>
<!--form body region start-->
<form id="Form1" method="post" runat="server">
<table class="EasyTable" width="100%">
<tr class="TD_LEFT">
<td colSpan="6">界面主菜单设置</td>
</tr>
<TR align="center">
<td width="18%"></td>
<TD>不显示的菜单项<br>
<SELECT id="selLeft" ondblclick="AddItem(selLeft, selRight)" style="WIDTH: 150px" multiple
size="10" name="selLeft" runat="server" type="select-multiple">
</SELECT>
</TD>
<TD width="100">
<TABLE id="Table3" align="center">
<TR>
<TD><INPUT id="btnAdd" title="将左边列表选中内容添加到右边列表" onclick="AddItem(selLeft, selRight)" type="button"
value="添加>>" name="btnAdd" runat="server"></TD>
</TR>
<TR>
<TD><INPUT id="btnDel" title="将右边列表选中内容删除" onclick="DelItem(selLeft, selRight)" type="button"
value="<<删除" name="btnDel" runat="server">
</TD>
</TR>
</TABLE>
</TD>
<TD>显示的菜单项<br>
<SELECT id="selRight" ondblclick="DelItem(selLeft, selRight)" style="WIDTH: 150px" multiple
size="10" name="selRight" runat="server" type="select-multiple">
</SELECT>
</TD>
<td><INPUT id="btnUP" style="FONT-WEIGHT: bold; FONT-SIZE: 15pt; WIDTH: 28px; HEIGHT: 32px; TEXT-DECORATION: none"
onclick="MovItem(selRight, 1)" type="button" value="↑">
<br>
<br>
<INPUT id="btnDOWN" style="FONT-WEIGHT: bold; FONT-SIZE: 15pt; WIDTH: 28px; HEIGHT: 32px; TEXT-DECORATION: none"
onclick="MovItem(selRight, 0)" type="button" value="↓">
</td>
<td width="18%"></td>
</TR>
</table>
<table class="ButtonTab" width="100%">
<tr>
<td colSpan="6" height="2"><INPUT id="hdnValue" type="hidden" name="hdnValue" runat="server"></td>
</tr>
<tr>
<td></td>
<td style="WIDTH: 108px"><INPUT class="button" id="btnSave" onclick="javascript:return OnSubmit(selRight);" type="submit"
value="保存设置" Runat="server">
</td>
<td style="WIDTH: 108px"><input onclick="javascript:if(confirm('所做修改将被还原，是否继续？')){document.location.reload();}"
type="button" value="重新设置" name="btnReset"></td>
<td></td>
</tr>
</table>
</form>
<!--form body region end-->
</body>
<!--form body region start-->
<form id="Form1" method="post" runat="server">
<table class="EasyTable" width="100%">
<tr class="TD_LEFT">
<td colSpan="6">界面主菜单设置</td>
</tr>
<TR align="center">
<td width="18%"></td>
<TD>不显示的菜单项<br>
<SELECT id="selLeft" ondblclick="AddItem(selLeft, selRight)" style="WIDTH: 150px" multiple
size="10" name="selLeft" runat="server" type="select-multiple">
</SELECT>
</TD>
<TD width="100">
<TABLE id="Table3" align="center">
<TR>
<TD><INPUT id="btnAdd" title="将左边列表选中内容添加到右边列表" onclick="AddItem(selLeft, selRight)" type="button"
value="添加>>" name="btnAdd" runat="server"></TD>
</TR>
<TR>
<TD><INPUT id="btnDel" title="将右边列表选中内容删除" onclick="DelItem(selLeft, selRight)" type="button"
value="<<删除" name="btnDel" runat="server">
</TD>
</TR>
</TABLE>
</TD>
<TD>显示的菜单项<br>
<SELECT id="selRight" ondblclick="DelItem(selLeft, selRight)" style="WIDTH: 150px" multiple
size="10" name="selRight" runat="server" type="select-multiple">
</SELECT>
</TD>
<td><INPUT id="btnUP" style="FONT-WEIGHT: bold; FONT-SIZE: 15pt; WIDTH: 28px; HEIGHT: 32px; TEXT-DECORATION: none"
onclick="MovItem(selRight, 1)" type="button" value="↑">
<br>
<br>
<INPUT id="btnDOWN" style="FONT-WEIGHT: bold; FONT-SIZE: 15pt; WIDTH: 28px; HEIGHT: 32px; TEXT-DECORATION: none"
onclick="MovItem(selRight, 0)" type="button" value="↓">
</td>
<td width="18%"></td>
</TR>
</table>
<table class="ButtonTab" width="100%">
<tr>
<td colSpan="6" height="2"><INPUT id="hdnValue" type="hidden" name="hdnValue" runat="server"></td>
</tr>
<tr>
<td></td>
<td style="WIDTH: 108px"><INPUT class="button" id="btnSave" onclick="javascript:return OnSubmit(selRight);" type="submit"
value="保存设置" Runat="server">
</td>
<td style="WIDTH: 108px"><input onclick="javascript:if(confirm('所做修改将被还原，是否继续？')){document.location.reload();}"
type="button" value="重新设置" name="btnReset"></td>
<td></td>
</tr>
</table>
</form>
<!--form body region end-->
</body>
