<%@ 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. 机器学习笔记（十）---- KNN（K Nearst Neighbor）

    KNN是一种常见的监督学习算法,工作机制很好理解:给定测试样本,基于某种距离度量找出训练集中与其最靠近的k个训练样本,然后基于这k个"邻居"的信息来进行预测.总结一句话就是&quo ...

  2. springcloud集成kafka

    项目名称:布控预警 水平拆分出来的项目,作为一个单独的可以对外提供服务的项目 项目设计:springcloud,可以集成各个不同平台的一个作为对外提供的微服务项目 项目功能:实现各个平台和本平台之间的 ...

  3. NAT回流（Twice NAT）Hairping 参数详解

    内网用户需要通过域名访问内网的服务器,一般商用环境是无法访问的,需要经过以下配置,原理不说了,直接说配置. nat (inside,inside) source dynamic inside-net  ...

  4. 侠梦说pinpoint--界面上的图标之AgetnInfo数据研究

    前言 在启动一个挂载pinpoint的springboot项目的时候,界面上显示成了jboss的图标,所以今天研究了一下这个数据是怎么来的. 我们知道不同图标和服务类型有关,服务不同,图标就不同,这在 ...

  5. 测试工程师有福啦！一键生成api文档及测试功能

    最近发现一个比较好用的插件,可根据api的功能注释说明一键生成文档以及功能demo: swaggerUI 是一个简单的Restful API 测试和文档工具.简单.漂亮.易用.通过读取JSON 配置显 ...

  6. [TimLinux] Python学习内容框架

    以下内容主体来自<Python学习手册第四版>,大致整理出的方向 1. 第一部分:使用入门 介绍Python语法之前,先对Python的的各个方面进行一个比较宽广的介绍,包含对Python ...

  7. Vue - 组件通信之$attrs、$listeners

    前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...

  8. 小程序如何支持使用 async/await （构建npm版）

    前言 小程序本身是不支持async/await语法的,但有些应用场景,我们使用async/await会使得代码更简洁,也更易于维护,用过都知道是有多爽的.既然小程序不支持,那我们可以借助 fackbo ...

  9. 利用 Redis 来优化功能部署和错误分类

    来源:Redislabs 作者:Shabih Syed 翻译:Kevin (公众号:中间件小哥) 为了让系统运行更流畅,又避免 Knights Capital 在 2012 年犯下的 4.6 亿美元的 ...

  10. 深入探索Java设计模式（二）之策略模式

    策略设计模式是Java API库中常见的模式之一.这与另一个设计模式(称为状态设计模式)非常相似.本文是在学习完优锐课JAVA架构VIP课程—[框架源码专题]中<学习源码中的优秀设计模式> ...