DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 使用jquery實現select添加實現後台權限添加的效果
使用jquery實現select添加實現後台權限添加的效果
編輯:JQuery特效代碼     

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

兩個列表都可以多選,

實現如下效果:

1、雙擊第一個列表中任意一個列表項,實現向下添加

2、雙擊第二個列表中任意一個列表項,實現刪除,

2、點擊按鈕,實現對應功能。

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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved