JQuery 权限管理界面

 

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >
     < link  rel ="stylesheet"  type ="text/css"  href ="Css/Commom.css"   />
     < script  src ="Scripts/jquery-1.4.1.js"  type ="text/javascript" ></ script >
     < script  language ="javascript"  type ="text/javascript" >
        $(document).ready( function  () {
            $( " #Button1 " ).click( function  () {
                 // 获取id为Select1 下的option 并且是选中状态的进行移除；
                 var  items  =  $( " #Select1 option:selected " ).remove();
                 // 获取id为Select2，通过append方法，进行填充；
                $( " #Select2 " ).append(items);
            });

            $( " #Button2 " ).click( function  () {
                 // 获取id为Select2 下的option 并且是选中状态的进行移除；
                 var  items  =  $( " #Select2 option:selected " ).remove();
                 // 获取id为Select1，通过append方法，进行填充；
                $( " #Select1 " ).append(items);
            });

            $( " #Button3 " ).click( function  () {
                 var  items  =  $( " #Select1 option " ).remove();
                $( " #Select2 " ).append(items);

            });

            $( " #Button4 " ).click( function  () {
                 var  items  =  $( " #Select2 option " ).remove();
                $( " #Select1 " ).append(items);

            });
        });
     </ script >
</ head >
< body >
     < div  class ="column" >
         < select  id ="Select1"  multiple ="multiple"  style ="width: 70px; height: 150px; border: 1px solid #000;
            float: left;" >
             < option > 备份数据 </ option >
             < option > 删除文章 </ option >
             < option > 恢复文章 </ option >
             < option > 移动文章 </ option >
             < option > 管理留言 </ option >
         </ select >
         < ul  style ="float: left;" >
             < li >
                 < input  id ="Button1"  type ="button"  value =">"   /></ li >
             < li >
                 < input  id ="Button2"  type ="button"  value ="<"   /></ li >
             < li >
                 < input  id ="Button3"  type ="button"  value =">>"   /></ li >
             < li >
                 < input  id ="Button4"  type ="button"  value ="<<"   /></ li >
         </ ul >
         < select  id ="Select2"  multiple ="multiple"  style ="width: 70px; height: 150px; border: 1px solid #000;" >
         </ select >
     </ div >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/zhuiyi/archive/2011/06/16/2083161.html