<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>下拉框移动</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        .all{
            width: 700px;
            height:500px;
        }
        .left{
            margin-left: 50px;
            margin-top: 100px;
            width: 200px;
            height:100px;
            float: left;
        }
        .mod{
            margin-top: 100px;
            margin-left: 100px;
            width: 100px;
            height: 100px;
            float: left;
        }
        .right{
            margin-top: 100px;
            width:200px;
            height:100px;
            float: right;
        }
        select{
            width:200px;
            height:100px;
        }
    </style>
    <script>
        $(function () {
            $(".leftbtn").click(function () {
                $(".rightsel").append($(".leftsel > option:selected"));
            });
            $(".reghtbtn").click(function () {
                $(".rightsel > option:selected").appendTo($(".leftsel"));
            });
        });

    </script>
</head>
<body>
<div class="all">
<div class="left">
    <select multiple="multiple" class="leftsel">
        <option>山东</option>
        <option>山西</option>
        <option>陕西</option>
        <option>北京</option>
        <option>上海</option>
    </select>
</div>
<div class="mod">
    <br>
    <input type="button" value="-->" class="leftbtn"><br><br><br>
    <input type="button" value="<--" class="reghtbtn">
</div>
<div class="right">
    <select class="rightsel" multiple="multiple">
        <option>江苏</option>
    </select>
</div>
</div>
</body>
</html>

下拉框移动 jquery的更多相关文章

  1. div模拟的下拉框特效jquery

    从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...

  2. 一句话美化你的下拉框之jQuery.selectMM插件

    之前很喜欢 jquery.Dropkick 这个老外美化框插件,但是:IE情况下如果数据多滚动条出现的时候就滚不了,作者也没修复 于是准备自己写一款(确切的说是修改一款吧!!).这款插件是在16素材网 ...

  3. 单选框和下拉框的jquery操作

    单选框 <input type="radio" name="rdSendType" value="email" checked=&qu ...

  4. select下拉框插件jquery.editable-select

    项目中有个需求,下拉框既可以下拉选择,也可以手动填写 html代码 <span>数据来源</span> </select> js代码 $('#noMean').ed ...

  5. Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）

    需求类似这样  ↓ ↓ ↓   -->    菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: <script type="text/javascript"& ...

  6. javaScript基础练习题-下拉框制作(JQuery)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  8. jQuery的下拉框应用

    jQuery的下拉框应用 jQuery的下拉框左右选择应用 直接上代码 <!DOCTYPE html> <html> <head> <meta charset ...

  9. js 下拉框效果

    <script type="text/javascript"> window.onload = function () { ]; ]; var aLi = oSub.g ...

随机推荐

  1. C 可变参数函数的本质

    C语言支持定义可变参数的函数,方法是在函数的参数列表最后加上 " ... ",代表变长的参数列表,例如: void Func(int num, ...) { } 需要注意 “... ...

  2. ceph分布式存储

    存储分类: DAS:直连存储    ide线  sata线   usd线   sas线 NAS:网络附加存储   nfs   samba   ftp SAN:存储区域网络      issci SDS ...

  3. shell 替换文本中的某个符号为换行符

    替换后为: 0.06774 脚本: :%s/,"/\r/g

  4. SpringBoot项目创建与第一个SSM项目示例

    本节介绍SpringBoot创建第一个示例SSM项目的完整过程,使用工具STS,与IDEA操作基本类似. 示例代码在:https://github.com/laolunsi/spring-boot-e ...

  5. Xcode中.a文件引起的错误

    一.     TARGETS -> Build Settings-> Search Paths下 1．  Library Search Paths 删除不存在的路径,保留.a文件的路径(此 ...

  6. UVa-10652 包装木板

    Input: standard inputOutput: standard output Time Limit: 2 seconds The small sawmill in Mission, Bri ...

  7. SpringBoot系列之Spring Data Jpa集成教程

    SpringBoot系列之Spring Data Jpa集成教程 Spring Data Jpa是属于Spring Data的一个子项目,Spring data项目是一款集成了很多数据操作的项目,其下 ...

  8. iSensor APP 之 摄像头调试 OV5642

    iSensor APP 之 摄像头调试  OV5642 iSensor app 非常适合调试各种摄像头,已测试通过的sensor有: l  OV7670.OV7725.OV9650.OV9655.OV ...

  9. elasticsearch节点请求流程

  10. 21.跨域和CORS

    一 跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...