javascript實(shí)現(xiàn)listbox左右移動(dòng)實(shí)現(xiàn)代碼
更新時(shí)間:2010年05月26日 22:05:38 作者:
javascript實(shí)現(xiàn)listbox左右移動(dòng)實(shí)現(xiàn)代碼,需要的朋友可以參考下。
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>所有地區(qū)</b> <asp:HiddenField ID="HidDistrictId" runat="server" /> </td>
<td align="center" width="60"> </td>
<td align="center" width="180"><b>已選地區(qū)</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部分
存儲(chǔ)是存 HidDistrictId.Value里的值,具體部分,用的時(shí)候再調(diào)節(jié)
4。 效果圖:
復(fù)制代碼 代碼如下:
<table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460"
align="left" borderColorLight="#000000" border="1">
<tr bgColor="#cccccc">
<td align="center" width="180"><b>所有地區(qū)</b> <asp:HiddenField ID="HidDistrictId" runat="server" /> </td>
<td align="center" width="60"> </td>
<td align="center" width="180"><b>已選地區(qū)</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 部分:
復(fù)制代碼 代碼如下:
<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部分
存儲(chǔ)是存 HidDistrictId.Value里的值,具體部分,用的時(shí)候再調(diào)節(jié)
4。 效果圖:
您可能感興趣的文章:
- JS ListBox的簡(jiǎn)單功能實(shí)現(xiàn)代碼
- js 獲取Listbox選擇的值的代碼
- 使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請(qǐng)
- JavaScript如何從listbox里同時(shí)刪除多個(gè)項(xiàng)目
- 用JavaScript實(shí)現(xiàn)類似于ListBox功能示例代碼
- JavaScript控制兩個(gè)列表框listbox左右交換數(shù)據(jù)的方法
- 輕松使用jQuery雙向select控件Bootstrap Dual Listbox
- jquery控制listbox中項(xiàng)的移動(dòng)并排序
- 基于JQUERY的兩個(gè)ListBox子項(xiàng)互相調(diào)整的實(shí)現(xiàn)代碼
- jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
- jquery移動(dòng)listbox的值原理及代碼
- JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
相關(guān)文章
.NET?SkiaSharp?生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)
這篇文章主要為大家介紹了.NET?SkiaSharp?生成二維碼驗(yàn)證碼及指定區(qū)域截取方法實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
詳解如何在ASP.NET Core Web API中以三種方式返回?cái)?shù)據(jù)
這篇文章主要介紹了詳解如何在ASP.NET Core Web API中以三種方式返回?cái)?shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
asp.net request.PathInfo實(shí)現(xiàn)的url重寫
最近對(duì)在開始研究url重寫,對(duì)重寫的原理以及重寫之后引起的性能問(wèn)題是研究的重點(diǎn),研究過(guò)程中發(fā)現(xiàn)了一種輕便的“url重寫方案”2009-04-04
aspxgridview CustomButtonCallback 不支持彈出消息提示解決方法
aspxgridveiw是devexpress的一個(gè)grid控件,使用起來(lái)還不錯(cuò),不能再 CustomButtonCallback 事件中使用response.write,具體的解決方法如下,感興趣的朋友可以參考下哈2013-06-06
微信公眾平臺(tái)開發(fā)之獲得ACCESSTOKEN .Net代碼解析
這篇文章主要為大家詳細(xì)解析了微信公眾平臺(tái)開發(fā)之獲得ACCESSTOKEN .Net代碼,感興趣的小伙伴們可以參考一下2016-06-06
asp net core2.1如何使用jwt從原理到精通(二)
這篇文章主要給大家介紹了關(guān)于asp net core2.1如何使用jwt從原理到精通的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
ASP.NET URL偽靜態(tài)重寫實(shí)現(xiàn)方法
ASP.NET下為靜態(tài)的實(shí)現(xiàn)方法。2009-12-12

