使用jquery實現(xiàn)select添加實現(xiàn)后臺權(quán)限添加的效果

更新時間：2011年05月28日 00:57:15 作者：

使用jquery實現(xiàn)select添加實現(xiàn)后臺權(quán)限添加的效果，需要的朋友可以參考下。

呃。其實很簡單的東西啦。頁面的圖

兩個列表都可以多選，

實現(xiàn)如下效果：

1、雙擊第一個列表中任意一個列表項，實現(xiàn)向下添加

2、雙擊第二個列表中任意一個列表項，實現(xiàn)刪除，

2、點擊按鈕，實現(xiàn)對應功能。

Html代碼

復制代碼代碼如下:

 
<form name="form1" method="post" action=""> 
<select id="select1" size="5" multiple style="width:100px " > 
<option value="111">北京</option> 
<option value="222">上海</option> 
<option value="333">廣州</option> 
<option value="333">山東</option> 
<option value="333">常州</option> 
</select><br/><br/> 
<input type="button" id="button1" value="添加"> 
<input type="button" id="button2" value="刪除"><br/><br/> 
<select id="select2" size="5" multiple style="width:100px " > 

</select> 
</form> 

jquery代碼

復制代碼代碼如下:

 
<script src="js/jquery-1.6.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#select1").dblclick(function () { $("#select1 :selected").appendTo($("#select2")); }); 
$("#select2").dblclick(function () { $("#select2 :selected").appendTo($("#select1")); }); 
$("#button1").click(function () { $("#select1 option:selected").appendTo($("#select2")); }); 
$("#button2").click(function () { $("#select2 option:selected").appendTo($("#select1")); }); 
}) 
</script> 

您可能感興趣的文章:

select

相關(guān)文章

input輸入框內(nèi)容實時監(jiān)測(附代碼)
這篇文章主要介紹了如何實時監(jiān)測input輸入框內(nèi)容，具體操作步驟大家可查看下文詳細講解,感興趣的小伙伴們可以參考一下。
2017-08-08
QRCode.js：基于JQuery的生成二維碼JS庫的使用
本篇文章主要介紹了QRCode.js：基于JQuery的生成二維碼JS庫的使用，具有一定的參考價值，有興趣的同學可以了解一下
2017-06-06
原來Jquery.load的方法可以一直load下去
使用jQuery.load方法加載一個網(wǎng)頁，那么這個網(wǎng)頁內(nèi)部的js代碼是否能夠執(zhí)行呢，答案是肯定的，這就相當于把load的內(nèi)容與主頁面進行了合并一樣
2011-03-03
jQuery.clean使用方法及思路分析
jQuery.clean源碼分析包括：jQuery.clean使用方法、思路分析及源碼注釋分析感興趣的朋友可以參考下
2013-01-01
jQuery 操作下拉列表框?qū)崿F(xiàn)代碼
操作下拉列表框的jquery代碼，方便學習jquery的朋友。
2010-02-02
jQuery中:button選擇器用法實例
這篇文章主要介紹了jQuery中:button選擇器用法,實例分析了:button選擇器的功能、定義及選取按鈕的使用技巧,需要的朋友可以參考下
2015-01-01
JQuery操作Select的Options的Bug(IE8兼容性視圖模式)
JQuery在IE8兼容性視圖模式下操作Select的Options的Bug在本文進行重現(xiàn)并給出詳細的解決方法，感興趣的朋友可以參考下哈，希望對你有所幫助
2013-04-04
zTree異步加載展開第一級節(jié)點的實現(xiàn)方法
這篇文章主要介紹了zTree異步加載展開第一級節(jié)點的實現(xiàn)方法,需要的朋友可以參考下
2017-09-09
基于Jquery的簡單&簡陋Tabs插件代碼
一個基于Jquery的簡單&簡陋Tabs插件，學習的朋友可以參考下。
2010-02-02
高效jQuery選擇器的5個技巧實例分析
這篇文章主要介紹了高效jQuery選擇器的5個技巧,結(jié)合實例形式總結(jié)分析了jquery選擇器使用過程中發(fā)的各種常用技巧,需要的朋友可以參考下
2019-11-11