zoukankan      html  css  js  c++  java
  • 使用jquery实现权限添加的效果

    呃。其实很简单的东西啦。

    页面的图

    两个列表都可以多选,

    实现如下效果:

    1、双击第一个列表中任意一个列表项,实现向下添加

    2、双击第二个列表中任意一个列表项,实现删除,

    2、点击按钮,实现对应功能。

    Html代码

    <form name="form1" method="post" action="">
    <select id="select1" size="5" multiple style="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="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>
    一只喜欢烘焙的IT喵星人
  • 相关阅读:
    数据中心基础设施自动化运维之puppet专项
    centos git版本服务器配置
    安装PHP出现make: *** [sapi/cli/php] Error 1 解决办法
    php5.5 yum源
    CentOS下源码安装Apache2.4+PHP5.4+MySQL5.5
    php升级到5.4
    puppet重申证书
    passwnger
    Http状态消息
    UVA 10168 Summation of Four Primes(数论)
  • 原文地址:https://www.cnblogs.com/CherryGhost/p/2059785.html
Copyright © 2011-2022 走看看