左右两个列表框项之间的添加、移除、上下移动

左右两个列表框项之间的添加、移除、上下移动的JS脚本：

Code

// <!CDATA[

//双击source某项时添加该项到destination

function AddOne(source, destination)

{

var oOption = document.createElement("option");

oOption.text = source.options[source.selectedIndex].text;

oOption.value = source.options[source.selectedIndex].value;

destination.options.add(oOption);

}

//双击list某项时删除该项

function DeleteOne(list)

{

list.options.remove(list.selectedIndex);

}

//将source选择项全部添加到destination

function selAdd(source, destination)

{

var count = source.options.length;

for (var i = 0; i < count; i++)

{

if (source.options[i].selected)

{

var oOption = document.createElement("option");

oOption.text = source.options[i].text;

oOption.value = source.options[i].value;

destination.options.add(oOption);

}

//将source所有项全部添加到destination

function selAddAll(source, destination)

{

var count = source.options.length;

for (var i = 0; i < count; i++)

{

var oOption = document.createElement("option");

oOption.text = source.options[i].text;

oOption.value = source.options[i].value;

destination.options.add(oOption);

}

//将list选择项全部删除

function selDelete(list)

{

for (var i = list.options.length - 1; i >= 0; i--)

{

if (list.options[i].selected)

list.options.remove(i);

}

//删除list所有项

function selDeleteAll(list)

{

for (var i = list.options.length - 1; i >= 0; i--)

{

list.options.remove(i);

}

//上移list某选择项

function selUp(list)

{

var i = list.selectedIndex;

if (i>0)

{

var t = list.options[i - 1].text;

var v = list.options[i - 1].value;

list.options[i - 1].text = list.options[i].text;

list.options[i - 1].value = list.options[i].value;

list.options[i].text = t;

list.options[i].value = v;

list.options[i].selected = false;

list.options[i - 1].selected = true;

return;

}

//下移list某选择项

function selDown(list)

{

var i = list.selectedIndex;

var count = list.options.length;

if (i<count-1)

{

var t = list.options[i].text;

var v = list.options[i].value;

list.options[i].text = list.options[i + 1].text;

list.options[i].value = list.options[i + 1].value;

list.options[i + 1].text = t;

list.options[i + 1].value = v;

list.options[i + 1].selected = true;

list.options[i].selected = false;

return;

}

//保存list列表框所有项到hf隐藏域

function SaveList(list, hf)

{

hf.value = "";

for (var i = 0; i < list.options.length; i++)

{

hf.value += list.options[i].text + ":" + list.options[i].value + "#";

}

/**//////

//双击lstSource列表框

function lstSource_dblclick()

{

var lstSource = document.getElementById("<%= lstSource.ClientID %>");

var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");

AddOne(lstSource, lstDestination);

DeleteOne(lstSource);

}

//双击lstDestination列表框

function lstDestination_dblclick()

{

var lstSource = document.getElementById("<%= lstSource.ClientID %>");

var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");

AddOne(lstDestination, lstSource);

DeleteOne(lstDestination);

}

//添加（从左往右）

function btnAdd_onclick()

{

var lstSource = document.getElementById("<%= lstSource.ClientID %>");

var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");

selAdd(lstSource, lstDestination);

selDelete(lstSource);

}

//全部添加（从左往右）

function btnAddAll_onclick()

{

var lstSource = document.getElementById("<%= lstSource.ClientID %>");

var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");

selAddAll(lstSource, lstDestination);

selDeleteAll(lstSource);

}

//移除（从右往左）

function btnDelete_onclick()

{

var lstSource = document.getElementById("<%= lstSource.ClientID %>");

var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");

selAdd(lstDestination, lstSource);

selDelete(lstDestination);

}

//全部移除（从右往左）

function btnDeleteAll_onclick()

{

var lstSource = document.getElementById("<%= lstSource.ClientID %>");

var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");

selAddAll(lstDestination, lstSource);

selDeleteAll(lstDestination);

}

//上移

function btnUp_onclick()

{

var obj = document.getElementById("<%= lstDestination.ClientID %>");

selUp(obj);

}

//下移

function btnDown_onclick()

{

var obj = document.getElementById("<%= lstDestination.ClientID %>");

selDown(obj);

}

//保存所有的列表框数据项到隐藏域

function SaveAllList()

{

var lstSource = document.getElementById("<%= lstSource.ClientID %>");

var hfListSource = document.getElementById("<%= hfListSource.ClientID %>");

SaveList(lstSource, hfListSource);

var lstDestination = document.getElementById("<%= lstDestination.ClientID %>");

var hfListDestination = document.getElementById("<%= hfListDestination.ClientID %>");

SaveList(lstDestination, hfListDestination);

}

// ]]>

</script>

但是，通过JS脚本只是改变了列表框在客户端的各项内容，如果想保持列表框服务器端和客户端的内容一致，需借助HiddenField空间。页面元素代码如下：

Code

<table>

<tr>

<td>

<asp:ListBox ID="lstSource" runat="server" Height="169px" Width="74px"

SelectionMode="Multiple" ondblclick="return lstSource_dblclick()">

</asp:ListBox>

</td>

<td>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

<tr>

<td>

</tr>

</table>

</td>

<td>

<asp:ListBox ID="lstDestination" runat="server" Height="169px" Width="74px"

SelectionMode="Multiple" ondblclick="return lstDestination_dblclick()">

</asp:ListBox>

</td>

<td>

<tr>

<td>

<input id="btnUp" type="button" value="上移"

onclick="return btnUp_onclick()" /></td>

</tr>

<tr>

<td>

<input

id="btnDown" type="button" value="下移" onclick="return btnDown_onclick()" /></td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

 </td>

<asp:Button

ID="btnSubmit" runat="server" onclick="btnSubmit_Click" Text="确定"

OnClientClick="SaveAllList()" UseSubmitBehavior="False" />

</td>

<td>

 </td>

<td>

 </td>

</tr>

</table>

<asp:HiddenField ID="hfListSource" runat="server" />

<asp:HiddenField ID="hfListDestination" runat="server" />

后台代码CS文件的Page_Load事件代码如下：

Code

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindSource();

BindDestination();

}

else

{

lstSource.Items.Clear();

string[] list = hfListSource.Value.Split('#');

for (int i = 0; i < list.Length - 1; i++)

{

string[] t = list[i].Split(':');

lstSource.Items.Add(new ListItem(t[0], t[1]));

}

lstDestination.Items.Clear();

list = hfListDestination.Value.Split('#');

for (int i = 0; i < list.Length - 1; i++)

{

string[] t = list[i].Split(':');

lstDestination.Items.Add(new ListItem(t[0], t[1]));

}

posted on 2009-07-12 21:24 ms_dos 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/nine425/archive/2009/07/12/1522103.html

左右两个列表框项之间的添加、移除、上下移动相关推荐

jQuery实现两个列表框的值之间的互换：
jQuery实现两个列表框的值之间的互换: 截图如下: 代码如下: <%@ page language="java" import="java.util.*&quo ...
java实现两个列表框关联_两个下拉列表框进行关联
这个功能是注册常见的功能模块之一,就是当你点击第一个包含省份的下拉列表框时,第二个包含城市的下拉列表相应的显示出来.如何实现这样的功能? 我个人认为数据库本身的设计很关键,设计如下: Privince ...
向工作表中添加列表框或组合框
http://office.microsoft.com/zh-cn/excel-help/HP010236681.aspx 添加列表框(表单控件) 如果"开发工具"选项卡未显示,请 ...
下拉选择框其他_列表框 vs 下拉列表，哪个更好？
许多UI控件允许用户选择选项,它们包括复选框.单选按钮.切换开关.步进器.列表框和下拉列表. 在本文中,作者对列表框和下拉列表进行了定义,讨论何时使用各个元素,以及各个情况下使用哪一种更加合适. 摘要 ...
php与mysql列表_PHP+Mysql+jQuery实现的查询和列表框选择
本篇文章主要介绍PHP+Mysql+jQuery实现的查询和列表框选择,感兴趣的朋友参考下,希望对大家有所帮助. 本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择 ...
php列表框怎么用,PHP+Mysql+jQuery查询和列表框选择操作实例讲解
这篇文章主要介绍了PHP+Mysql+jQuery查询和列表框选择操作实现过程,需要的朋友可以参考下本文讲解如何通过ajax查询mysql数据,并将返回的数据显示在待选列表中,再通过选择最终将选项加 ...
jQuery多选列表框插件Multiselect
效果如下图: 在官网这里下载所需的js,css等相关文件然后引入以下文件: <script type="text/javascript" src="js/jque ...
常用控件：列表框控件ListBox
列表框控件简介列表框给出了一个选项清单,允许用户从中进行单项或多项选择,被选中的项会高亮显示.列表框可分为单选列表框和多选列表框,顾名思义,单选列表框中一次只能选择一个列表项,而多选列表框可以同时选 ...
python列表框_「每日一练」Python列表框部件的运用
原标题:「每日一练」Python列表框部件的运用用Python就一定要用到界面操作,有一个好的用户界面,才会有好的用户体验,下边就开始创建我们的主窗口,并设置相应的列表框部件吧! 案例创建主窗口, ...

左右两个列表框项之间的添加、移除、上下移动

左右两个列表框项之间的添加、移除、上下移动相关推荐

最新文章

热门文章