列表中项的自由加减实现的例子
2005-04-28 16:49
302 查看
<div align=center>
<form>
<table align=center bgcolor="#e0e0e0" width=600 border=0 cellpadding=0 cellspacing=0>
<tr><td height=4></td></tr>
<tr><td> 待选择的部门列表:</td><td></td><td> 已选择的部门列表:</td></tr>
<tr><td>
<select name="CanSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="AddOne();">
<option value="'N900'">安技环保部</option>
<option value="'1600'">安技环保处</option>
<option value="'9400'">报社</option>
<option value="'C300'">采购部</option>
<option value="'N000'">厂长办公室</option>
<option value="'3220'">冲压厂技术科</option>
<option value="'2000'">党委办公室</option>
<option value="'D200'">党委宣传部</option>
<option value="'D100'">党委组织部</option>
<option value="'2400'">党校</option>
<option value="'3500'">第二车体厂</option>
<option value="'4300'">第二装配厂</option>
<option value="'3A00'">第三装配厂</option>
<option value="'3400'">第一车体厂</option>
<option value="'3600'">第一装配厂</option>
<option value="'4200'">电镀车间</option>
<option value="'9500'">电视台</option>
<option value="'E800'">动力厂</option>
<option value="'4000'">锻工车间</option>
<option value="'D400'">工会</option>
<option value="'B000'">公司办公室</option>
<option value="'B400'">计划财务部</option>
<option value="'0700'">监察审计部</option>
<option value="'6300'">进出口公司</option>
<option value="'4100'">精铸车间</option>
<option value="'N700'">离退休管理部</option>
<option value="'E600'">木工厂</option>
<option value="'C500'">品质保证部</option>
<option value="'B100'">企业管理部</option>
<option value="'B110'">信息中心</option>
<option value="'B600'">企业文化部</option>
<option value="'B300'">人力资源部</option>
<option value="'N600'">社会工作部</option>
<option value="'C400'">生产制造部</option>
<option value="'C600'">市场二部</option>
<option value="'C200'">市场一部</option>
<option value="'2700'">团委</option>
<option value="'C100'">研发中心</option>
<option value="'0350'">职工培训中心</option>
<option value="'1500'">质量保证部</option>
<option value="'3000'">铸钢厂</option>
<option value="'3300'">转向架厂</option>
<option value="'N300'">资产管理部</option>
<option value="'B800'">综合保障部</option>
<option value="'2200'">组织部</option>
</select>
</td>
<td align=center width=40>
<table width=100%>
<tr><td align=center ><input type=button name="AddSel" value=">" onclick="AddSele();" title="添加所选择的部门"></td></tr>
<tr><td align=center ><input type=button name="AddAll" value="≥" onclick="AddAlle();" title="添加所有的部门"></td></tr>
<tr><td align=center ><input type=button name="DelSel" value="<" onclick="DelSele();" title="删掉所选择的部门"></td></tr>
<tr><td align=center ><input type=button name="DelAll" value="≤" onclick="DelAlle();" title="删掉所有的部门"></td></tr>
</table>
</td>
<td align=right>
<select name="HaveSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="DelOne();">
</select>
</td></tr>
</table></form>
</div>
<script language=javascript>
var fldFrom=document.forms[0].CanSel; //待选择单位列表
var fldTo=document.forms[0].HaveSel; //已添加单位列表
//判断当前选择的是否已经添加了
function isNotExist(oneStr,oneSel)
{
for(var i=0;i<oneSel.length;i++)
{
if (oneSel.options[i].text==oneStr)
{
return false;
break;
}
}
return true;
}
//添加选择的
function AddSele()
{
for(var i=0;i<fldFrom.length;i++)
{
if (fldFrom.options[i].selected )
{
if (isNotExist(fldFrom.options[i].text,fldTo))
{fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value);
}
}
fldFrom.options[i].selected=false;
}
}
//删除选择的
function DelSele()
{
for(var i=fldTo.length-1;i>=0;i--)
{
if (fldTo.options[i].selected )
{
fldTo.options[i] = null;
}
}
}
//添加所有的
function AddAlle()
{
fldTo.length=0;
for(var i=0;i<fldFrom.length;i++)
{
fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value);
fldFrom.options[i].selected=false;
}
}
//添加一个(双击)
function AddOne()
{
if (isNotExist(fldFrom.options[fldFrom.selectedIndex].text,fldTo))
{fldTo.options[fldTo.length] = new Option(fldFrom.options[fldFrom.selectedIndex].text,fldFrom.options[fldFrom.selectedIndex].value);
fldFrom.options[fldFrom.selectedIndex].selected=false;
}
}
//删除所有
function DelAlle()
{
fldTo.length=0;
}
//删除一个(双击)
function DelOne()
{
fldTo.options[fldTo.selectedIndex]=null;
}
//进入前判断
function goEnter()
{
if (fldTo.length==0)
{
alert("请选择至少一个部门!");
}
else
{
for(var i=0;i<fldTo.length;i++)
{
fldTo.options[i].selected=true;
}
document.forms[0].submit();
for(var i=0;i<fldTo.length;i++)
{
fldTo.options[i].selected=false;
}
}
}
</script>
<form>
<table align=center bgcolor="#e0e0e0" width=600 border=0 cellpadding=0 cellspacing=0>
<tr><td height=4></td></tr>
<tr><td> 待选择的部门列表:</td><td></td><td> 已选择的部门列表:</td></tr>
<tr><td>
<select name="CanSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="AddOne();">
<option value="'N900'">安技环保部</option>
<option value="'1600'">安技环保处</option>
<option value="'9400'">报社</option>
<option value="'C300'">采购部</option>
<option value="'N000'">厂长办公室</option>
<option value="'3220'">冲压厂技术科</option>
<option value="'2000'">党委办公室</option>
<option value="'D200'">党委宣传部</option>
<option value="'D100'">党委组织部</option>
<option value="'2400'">党校</option>
<option value="'3500'">第二车体厂</option>
<option value="'4300'">第二装配厂</option>
<option value="'3A00'">第三装配厂</option>
<option value="'3400'">第一车体厂</option>
<option value="'3600'">第一装配厂</option>
<option value="'4200'">电镀车间</option>
<option value="'9500'">电视台</option>
<option value="'E800'">动力厂</option>
<option value="'4000'">锻工车间</option>
<option value="'D400'">工会</option>
<option value="'B000'">公司办公室</option>
<option value="'B400'">计划财务部</option>
<option value="'0700'">监察审计部</option>
<option value="'6300'">进出口公司</option>
<option value="'4100'">精铸车间</option>
<option value="'N700'">离退休管理部</option>
<option value="'E600'">木工厂</option>
<option value="'C500'">品质保证部</option>
<option value="'B100'">企业管理部</option>
<option value="'B110'">信息中心</option>
<option value="'B600'">企业文化部</option>
<option value="'B300'">人力资源部</option>
<option value="'N600'">社会工作部</option>
<option value="'C400'">生产制造部</option>
<option value="'C600'">市场二部</option>
<option value="'C200'">市场一部</option>
<option value="'2700'">团委</option>
<option value="'C100'">研发中心</option>
<option value="'0350'">职工培训中心</option>
<option value="'1500'">质量保证部</option>
<option value="'3000'">铸钢厂</option>
<option value="'3300'">转向架厂</option>
<option value="'N300'">资产管理部</option>
<option value="'B800'">综合保障部</option>
<option value="'2200'">组织部</option>
</select>
</td>
<td align=center width=40>
<table width=100%>
<tr><td align=center ><input type=button name="AddSel" value=">" onclick="AddSele();" title="添加所选择的部门"></td></tr>
<tr><td align=center ><input type=button name="AddAll" value="≥" onclick="AddAlle();" title="添加所有的部门"></td></tr>
<tr><td align=center ><input type=button name="DelSel" value="<" onclick="DelSele();" title="删掉所选择的部门"></td></tr>
<tr><td align=center ><input type=button name="DelAll" value="≤" onclick="DelAlle();" title="删掉所有的部门"></td></tr>
</table>
</td>
<td align=right>
<select name="HaveSel" size="24" style="background-color: #ffffff; word-spacing: 0;width:300" multiple ondblclick="DelOne();">
</select>
</td></tr>
</table></form>
</div>
<script language=javascript>
var fldFrom=document.forms[0].CanSel; //待选择单位列表
var fldTo=document.forms[0].HaveSel; //已添加单位列表
//判断当前选择的是否已经添加了
function isNotExist(oneStr,oneSel)
{
for(var i=0;i<oneSel.length;i++)
{
if (oneSel.options[i].text==oneStr)
{
return false;
break;
}
}
return true;
}
//添加选择的
function AddSele()
{
for(var i=0;i<fldFrom.length;i++)
{
if (fldFrom.options[i].selected )
{
if (isNotExist(fldFrom.options[i].text,fldTo))
{fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value);
}
}
fldFrom.options[i].selected=false;
}
}
//删除选择的
function DelSele()
{
for(var i=fldTo.length-1;i>=0;i--)
{
if (fldTo.options[i].selected )
{
fldTo.options[i] = null;
}
}
}
//添加所有的
function AddAlle()
{
fldTo.length=0;
for(var i=0;i<fldFrom.length;i++)
{
fldTo.options[fldTo.length] = new Option(fldFrom.options[i].text,fldFrom.options[i].value);
fldFrom.options[i].selected=false;
}
}
//添加一个(双击)
function AddOne()
{
if (isNotExist(fldFrom.options[fldFrom.selectedIndex].text,fldTo))
{fldTo.options[fldTo.length] = new Option(fldFrom.options[fldFrom.selectedIndex].text,fldFrom.options[fldFrom.selectedIndex].value);
fldFrom.options[fldFrom.selectedIndex].selected=false;
}
}
//删除所有
function DelAlle()
{
fldTo.length=0;
}
//删除一个(双击)
function DelOne()
{
fldTo.options[fldTo.selectedIndex]=null;
}
//进入前判断
function goEnter()
{
if (fldTo.length==0)
{
alert("请选择至少一个部门!");
}
else
{
for(var i=0;i<fldTo.length;i++)
{
fldTo.options[i].selected=true;
}
document.forms[0].submit();
for(var i=0;i<fldTo.length;i++)
{
fldTo.options[i].selected=false;
}
}
}
</script>
相关文章推荐
- 实现QQ好友式列表的代码例子下载
- iOS实现类似QQ的好友列表,自由展开折叠(在原来TableView的基础上添加一个字典,一个Button)
- appcan 多个列表购物车加减数量例子
- Android例子源码非第三方实现根据字母排序的城市列表
- 在XSL中实现项目列表的例子
- jquery实现文本框数量加减功能的例子分享
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnetList 所有评论列表的功能实现
- 请教:JSP里如何实现下拉组合框,既能从列表中选择也能自由输入,同时输入时自动定位到与已输字符最相符的列表项?
- 在XSL中实现项目列表的例子
- 利用boost::mutex实现线程安全列表模板类,附源码及使用例子
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnets 显示某个对象的评论列表的功能实现
- jquery实现文本框数量加减功能的例子分享
- ExpandableListView+Dialog实现弹出二级下拉列表选项。可自由用于Activity和Fragment中
- 可拖动拉伸的左右分栏效果,本例子是用Table以及JS来实现的,左右分栏可改变,拖动中间的边框就可实现宽度的调整,点击时可设置为隐藏左侧列表。
- 一个实现下拉列表内汉字内容排序的例子
- Android例子源码非第三方实现根据字母排序的城市列表
- Servlet监听-------------例子:显示在线列表,实现踢人功能
- 列表实现例子
- 可拖动拉伸的左右分栏效果,本例子是用Table以及JS来实现的,左右分栏可改变,拖动中间的边框就可实现宽度的调整,点击时可设置为隐藏左侧列表。