<%@ 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. 用Selenium自动化测试时,让ChromeDriver中不显示“正受到自动测试软件控制”

    背景: 在用Selenium做自动化测试的时候,默认ChromeDriver是会提示“Chrom正受到自动测试软件控制”的.如下图这样.但我们有些场景下,不希望这个提示出现.本文探索了几种语言去掉这个 ...

  2. npm 安装/删除/发布/更新/撤销 发布包

    目录 一. npm安装包 1.1 什么时候用本地/全局安装? 1 当你试图安装命令行工具的时候,例如 grunt CLI的时候,使用全局安装 2. 当你试图通过npm install 某个模块,并通过 ...

  3. 洛谷 题解 P1736 【创意吃鱼法】

    题目大意 给出一个 \(n \times m \ (1 \leq n, \ m \leq 2500)\) 的 \(01\) 矩阵,让你在其中找到一个最大的子矩阵使得该子矩阵除了一条对角线上的数字均为 ...

  4. java的传参究竟是按值传递的还是按引用传递的

    这里来弄清楚Java的传参究竟是按值传递的还是按引用传递的. 形参和实参 传参的概念里,有形参和实参的区分.形参是定义方法名和方法体的时候使用的参数,目的是用来接收调用该方法的时候传入的参数:实参是调 ...

  5. 分布式事务解决方案,中间件 Seata 的设计原理详解

    作者:张乘辉 前言 在微服务架构体系下,我们可以按照业务模块分层设计,单独部署,减轻了服务部署压力,也解耦了业务的耦合,避免了应用逐渐变成一个庞然怪物,从而可以轻松扩展,在某些服务出现故障时也不会影响 ...

  6. AJAX中的dataType

    参考ajax的api文档 dataType的类型:String ajax中的dataType的属性: text:返回纯文本字符串 json:返回json数据 jsonp:jsonp格式(我没用过) h ...

  7. NodeJS2-5环境&调试----process(进程)

    argv(参数相关的) /* argv argv0 execArgv execPath */ const { argv, argv0, execArgv, execPath } = process; ...

  8. 《MySQL数据库》常用语法(二)

    表关联关系: -- 内联接 SELECT * FROM m INNER JOIN n ON m.id = n.id; -- 左外联接 SELECT * FROM m LEFT JOIN n ON m. ...

  9. 2019 ECfianl

    这真的是一次失败的旅行,不过也有所收获. 我也是醉了,真的是,热身赛的时候对面队伍把B题快快的过了,就开始在那里说个不停,真的是超级烦(以为他们是个大佬队) 第二天正式赛了,他们过了两题,就没有了,( ...

  10. SuperMap iDesktop .NET 10i制图技巧-----如何利用二维平面数据起白膜

    1.打开超图的SuperMap iDesktop,加载数据源 udbx其实就是类似于arcgis中的gdb一样的东西,把数据压缩在里面了,这样也可以保证数据的统一集中 2.打开二维面数据,里面的结构如 ...