javascript实现listbox左右移动实现代码
更新时间:2010年05月26日 22:05:38 作者:
javascript实现listbox左右移动实现代码,需要的朋友可以参考下。
1。 html部分:
<table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460"
align="left" borderColorLight="#000000" border="1">
<tr bgColor="#cccccc">
<td align="center" width="180"><b>所有地区</b> <asp:HiddenField ID="HidDistrictId" runat="server" /> </td>
<td align="center" width="60"> </td>
<td align="center" width="180"><b>已选地区</b></td>
</tr>
<tr >
<td bgcolor="#cccccc" style="height: 200px; width: 180px;" >
<asp:listbox id="listNewEmp" runat="server" Height="200px" Width="180px" SelectionMode="Single"></asp:listbox></td>
<td valign="top" align="center" bgcolor="#cccccc" style="height: 200px; width: 60px;">
<asp:Panel ID="Panel1" runat="server" Height="180px" >
<br> <br>
<%--<asp:Button style="WIDTH: 48px; HEIGHT: 24px; font-family:宋体" Text="选择→" ID="btnReceSendToRight" runat="server" OnClick="btnReceSendToRight_Click"/>--%>
<INPUT type="button" value="选择→" onclick = "add('listNewEmp','listright','HidDistrictId')" Text="选择→" style="WIDTH: 48px; HEIGHT: 24px; font-family:宋体">
<br>
<br>
<INPUT type="button" value="←删除" onclick = "move('listright')" style="WIDTH: 48px; HEIGHT: 24px; font-family:宋体" Text="←删除">
<%--<asp:Button style="WIDTH: 48px; HEIGHT: 24px; font-family:宋体" Text="←删除" ID="btnReceSendToLeft" runat="server" OnClick="btnReceSendToLeft_Click"/>--%>
</asp:Panel>
</td>
<td bgcolor="#cccccc" style="height: 200px;">
<asp:listbox id="listright" runat="server" Height="200px" Width="180px" SelectionMode="Multiple"></asp:listbox>
</td>
</tr>
</table>
2。 javascript 部分:
<script language="Javascript">
function add(sourlist, deslist,hidId)
{ //添加
var objres = document.getElementById(sourlist);
var objsel = document.getElementById(deslist);
var customOptions;
for(var i = objres.options.length - 1 ;i >= 0;i--)
{
if(objres.options[i].selected)
{
customOptions = document.createElement("OPTION");
customOptions.text = objres.options[i].text;
customOptions.value = objres.options[i].value;
if (objsel.options.length>0)
objsel.remove(objsel.options.length - 1);
document.getElementById(hidId).value = customOptions.value;
objsel.add(customOptions,0);
}
}
return false;
}
function move(deslist) { //删除
var objres = document.getElementById(deslist);
objres.remove(objres.options.length - 1);
}
</script>
3.。cs部分
存储是存 HidDistrictId.Value里的值,具体部分,用的时候再调节
4。 效果图:
复制代码 代码如下:
<table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460"
align="left" borderColorLight="#000000" border="1">
<tr bgColor="#cccccc">
<td align="center" width="180"><b>所有地区</b> <asp:HiddenField ID="HidDistrictId" runat="server" /> </td>
<td align="center" width="60"> </td>
<td align="center" width="180"><b>已选地区</b></td>
</tr>
<tr >
<td bgcolor="#cccccc" style="height: 200px; width: 180px;" >
<asp:listbox id="listNewEmp" runat="server" Height="200px" Width="180px" SelectionMode="Single"></asp:listbox></td>
<td valign="top" align="center" bgcolor="#cccccc" style="height: 200px; width: 60px;">
<asp:Panel ID="Panel1" runat="server" Height="180px" >
<br> <br>
<%--<asp:Button style="WIDTH: 48px; HEIGHT: 24px; font-family:宋体" Text="选择→" ID="btnReceSendToRight" runat="server" OnClick="btnReceSendToRight_Click"/>--%>
<INPUT type="button" value="选择→" onclick = "add('listNewEmp','listright','HidDistrictId')" Text="选择→" style="WIDTH: 48px; HEIGHT: 24px; font-family:宋体">
<br>
<br>
<INPUT type="button" value="←删除" onclick = "move('listright')" style="WIDTH: 48px; HEIGHT: 24px; font-family:宋体" Text="←删除">
<%--<asp:Button style="WIDTH: 48px; HEIGHT: 24px; font-family:宋体" Text="←删除" ID="btnReceSendToLeft" runat="server" OnClick="btnReceSendToLeft_Click"/>--%>
</asp:Panel>
</td>
<td bgcolor="#cccccc" style="height: 200px;">
<asp:listbox id="listright" runat="server" Height="200px" Width="180px" SelectionMode="Multiple"></asp:listbox>
</td>
</tr>
</table>
2。 javascript 部分:
复制代码 代码如下:
<script language="Javascript">
function add(sourlist, deslist,hidId)
{ //添加
var objres = document.getElementById(sourlist);
var objsel = document.getElementById(deslist);
var customOptions;
for(var i = objres.options.length - 1 ;i >= 0;i--)
{
if(objres.options[i].selected)
{
customOptions = document.createElement("OPTION");
customOptions.text = objres.options[i].text;
customOptions.value = objres.options[i].value;
if (objsel.options.length>0)
objsel.remove(objsel.options.length - 1);
document.getElementById(hidId).value = customOptions.value;
objsel.add(customOptions,0);
}
}
return false;
}
function move(deslist) { //删除
var objres = document.getElementById(deslist);
objres.remove(objres.options.length - 1);
}
</script>
3.。cs部分
存储是存 HidDistrictId.Value里的值,具体部分,用的时候再调节
4。 效果图:
您可能感兴趣的文章:
- JS ListBox的简单功能实现代码
- js 获取Listbox选择的值的代码
- 使用javascript实现ListBox左右全选,单选,多选,全请
- JavaScript如何从listbox里同时删除多个项目
- 用JavaScript实现类似于ListBox功能示例代码
- JavaScript控制两个列表框listbox左右交换数据的方法
- 轻松使用jQuery双向select控件Bootstrap Dual Listbox
- jquery控制listbox中项的移动并排序
- 基于JQUERY的两个ListBox子项互相调整的实现代码
- jquery控制listbox中项的移动并排序的实现代码
- jquery移动listbox的值原理及代码
- JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
相关文章
DropDownList获取的SelectIndex一直为0的问题
由于初始化判断出错导致每次传到服务器的时候会初始化一次,这就导致每次获取DropDownList的SelectIndex的时候只能是02014-06-06.Net Core3.0 WEB API中使用FluentValidation验证(批量注入)
这篇文章主要介绍了.Net Core3.0 WEB API中使用FluentValidation验证(批量注入),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-12-12asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
其实这个已经是个比较常见的功能了,网上也有很多人做过这个了,但是很多都是仅仅做了一些基本的网页上自动完成功能,没有与具体的数据库进行联动,我今天所介绍这个自动完成的就是我修改的jQuery.AutoComplete+数据库的一个解决方案。2010-05-05
最新评论