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喵星人
  • 相关阅读:
    VC编程锦集-1
    VC窗口关闭调用顺序
    Windows消息WM_USER、WM_APP的区别
    Toolbar添加控件;创建多行toolbar;重新排列toolbar
    SQL模糊查询详解
    MySql格式化日期
    Apache PHP 服务环境配置
    kvm.install
    repo搭建
    apache故障处理
  • 原文地址:https://www.cnblogs.com/CherryGhost/p/2059785.html
Copyright © 2011-2022 走看看