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喵星人
  • 相关阅读:
    Django_05_模板
    Django_04_视图
    Django_03_后台管理
    Django_02_创建模型
    Django_01_创建图书管理项目
    Djang简介
    day_03比特币转账的运行原理
    day_02比特币的转账机制及其7个名词
    day01_人类社会货币的演变
    Socket问题
  • 原文地址:https://www.cnblogs.com/CherryGhost/p/2059785.html
Copyright © 2011-2022 走看看