使用jquery實現(xiàn)select添加實現(xiàn)后臺權限添加的效果
更新時間：2011年05月28日 00:57:15 作者：
使用jquery實現(xiàn)select添加實現(xià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>
您可能感興趣的文章:
- extjs 列表框(multiselect)的動態(tài)添加列表項的方法
- 兩個select之間option的互相添加操作(jquery實現(xiàn))
- jQuery操作Select選擇的Text和Value(獲取/設置/添加/刪除)
- JS動態(tài)添加option和刪除option(附實例代碼)
- JQuery給元素添加/刪除節(jié)點比如select
- JQuery中對Select的option項的添加、刪除、取值
- jQuery操作Select的Option上下移動及移除添加等等
- jquery動態(tài)添加option示例
- js添加select下默認的option的value和text的方法
- JS & JQuery 動態(tài)添加 select option
相關文章
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方法加載一個網(wǎng)頁，那么這個網(wǎng)頁內(nèi)部的js代碼是否能夠執(zhí)行呢，答案是肯定的，這就相當于把load的內(nèi)容與主頁面進行了合并一樣2011-03-03
jQuery.clean源碼分析包括：jQuery.clean使用方法、思路分析及源碼注釋分析感興趣的朋友可以參考下2013-01-01
操作下拉列表框的jquery代碼，方便學習jquery的朋友。2010-02-02
這篇文章主要介紹了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插件，學習的朋友可以參考下。2010-02-02
這篇文章主要介紹了高效jQuery選擇器的5個技巧,結(jié)合實例形式總結(jié)分析了jquery選擇器使用過程中發(fā)的各種常用技巧,需要的朋友可以參考下2019-11-11