<%@ 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. Eclipse for Tricore 的安装方法

    1.安装JDK32位版 2.安装Eclipse for Tricore 32位版(应该也只有32位的) 3.OK(如果打开Tricore提示找不到JDK的话,在网上搜索如何配置JDK,修改环境变量) ...

  2. HotStuff共识协议详解

    1. 前言 HotStuff提出了一个三阶段投票的BFT类共识协议,该协议实现了safety.liveness.responsiveness特性.通过在投票过程中引入门限签名实现了O(n)的消息验证复 ...

  3. react-native android/ios 手动/自动 修改版本号

    目录 一 手动操作 1.Android 2.IOS 二 自动从配置文件读取并写入相应的地方 1.package.json配置版本 2.Android: 3.IOS 添加sell代码 当版本迭代时候要修 ...

  4. Spring Data-Spring整合Hibernate基于JPA规范

    JPA:由 Sun 公司提供了一对对于持久层操作的标准(接口+文档) Hibernate:是 Gavin King 开发的一套对于持久层操作的自动的 ORM 框架. Hibernate JPA:是在 ...

  5. [TimLinux] JavaScript 判断 input checkbox选中的方法

    1. input属性 <label> <span>选择</span> <input type="checkbox" name=" ...

  6. nginx学习(一)：安装nginx

    学习下nginx,本篇文章主要讲解下在linux下安装nginx 下载nginx 安装包 1.去官网http://nginx.org/下载对应的nginx包,推荐使用稳定版本: 2.上传tar包到li ...

  7. linux 根据端口关闭程序的管道命令

    netstat -anp|grep :3306|head -n1|cut -d"/" -f1|sed 's/ /\r\n/g'|tail -n1|xargs -I{} kill - ...

  8. Mysql多实例数据库

    什么是Mysql的多实例? 简单的说,Mysql多实例就是一台服务器上同时开启多个不同的服务端口(如3306.3307)同时运行多个Mysql服务进程,这些服务进程通过不同socket监听不同的服务端 ...

  9. 【全栈修炼】396- OAuth2 修炼宝典

    一.OAuth 概念 开放授权(OAuth)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用.-- 维基百科 ...

  10. Happy Birthday! 今天我 1 周岁生日啦！

    2018.09.28,我第 1 天分享文章. 2019.09.28,我连续分享的第 365 天. 今天我 1 周岁啦! 生日意味着一个新的开端, 意味着重新把握生活的机会. 新的一岁,从新头像开始 愿 ...