<%@ 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. 在华为云ECS上手工通过Docker部署tomcat

    本文介绍了如何在华为云上ECS上手工通过Docker部署tomcat,并提供了Docker常用操作 一.环境准备 ECS:操作系统版本:    CentOS Linux release 7.6.181 ...

  2. volatile在外设寄存器基地址定义时的作用

    volatile,作用就是告诉编译器不要因优化而省略此指令,必须每次都直接读写其值,这样就能确保每次读或者写寄存器都真正执行到位.——野火

  3. Git 如何优雅地回退代码

    前言 从接触编程就开始使用 Git 进行代码管理,先是自己玩 Github,又在工作中使用 Gitlab,虽然使用时间挺长,可是也只进行一些常用操作,如推拉代码.提交.合并等,更复杂的操作没有使用过, ...

  4. [译]C#8.0中一个使接口更加灵活的新特性-默认接口实现

    9月份的时候,微软宣布正式发布C#8.0,作为.NET Core 3.0发行版的一部分.C#8.0的新特性之一就是默认接口实现.在本文中,我们将一起来聊聊默认接口实现. 众所周知,对现有应用程序的接口 ...

  5. Java修炼——容器体系框架总结

    容器有俩大接口Collection接口(无序,不唯一)和Map接口 Collection接口有俩个子接口分别是List和Set. List接口特点是有序但是不唯一,她有三个子接口分别是:ArrayLi ...

  6. HDU5919 Sequence II(主席树)

    Mr. Frog has an integer sequence of length n, which can be denoted as a1,a2,⋯,ana1,a2,⋯,anThere are ...

  7. Android Studio 3.0下创建menu布局文件的图例

    当开始一个android app的时候,android studio项目中没有看到menu文件夹:如下所示: 当要添加一个按钮时,很多文档上都会说,通过在项目的 res/menu 目录中新增一个 XM ...

  8. 如何正确的使用Python解释器？你之前肯定用错了

    作为python开发者,当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件.由于整个Python语言从 ...

  9. ARTS-S docker里程序通过ip访问外部数据库

    要先确保外部数据库能通过ip访问,然后启动docker的时间加参数--network host,如 docker run \ --name fcheck_async_worker \ -it \ -v ...

  10. Linux配置开机自启动的两种方法

    一.通过rc.local该文件实现开机自启   1:编写测试脚本 [root@host1 ~]# vim test.sh #!/bin/bash /bin/echo $(/bin/date +%F_% ...