jQuery实现两个下拉菜单的选项互相移动效果

最新推荐文章于 2021-06-03 01:47:03 发布
最新推荐文章于 2021-06-03 01:47:03 发布
阅读量983 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012054869/article/details/14648069
版权

jQuery实现两个下拉菜单的选项互相移动效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script language="javascript" type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
$(function (){
    $("#btn_right_one").click(function(){
    $("#rightSelect").append($("#leftSelect option:selected"));
        
        });
        
    $("#btn_right_all").click(function(){
    $("#rightSelect").append($("#leftSelect option"));
        
        });    
        
        $("#btn_left_one").click(function(){
    $("#leftSelect").append($("#rightSelect option:selected"));
        
        });
        
    $("#btn_left_all").click(function(){
    $("#leftSelect").append($("#rightSelect option"));
        
        });    
    
    });
</script>
</head>

<body>
<table width="300" border="1">
  <tr>
  <td align="center">
  <select id="leftSelect"  multiple="multiple" size="10" style="width:110px;">
  <option  value="选项1">选项1</option>
  <option  value="选项3">选项3</option>
  <option  value="选项5">选项5</option>
  <option  value="选项7">选项7</option>
  <option  value="选项9">选项9</option>
  </select>
  </td>
    <td align="center">
    <input type="button" id="btn_right_one" value="-->" />
    <input type="button" id="btn_right_all" value=" >>" />
    <input type="button" id="btn_left_one" value="<--" />
    <input type="button" id="btn_left_all" value=" <<" />
    </td>
    <td align="center">
    <select id="rightSelect"  multiple="multiple" size="10" style="width:110px;">
    <option  value="选项2">选项2</option>
  <option  value="选项4">选项4</option>
  <option  value="选项6">选项6</option>
  <option  value="选项8">选项8</option>
  <option  value="选项10">选项10</option>
    </select></td>
   
   
  </tr>
</table>
<input type="button" id="butn0" value="获取左侧值">
<input type="button" id="butn1" value="获取右侧值">

</body>
</html>

 

ZhangXD_BLOG
关注
专栏目录
jquery实现选项在两个下拉列表之间选择性移动的功能
xiaobozhu的博客
08-18 3793
jquery实现选项在两个下拉列表之间选择性移动的功能 jquery的强大是不言而喻的，你可以发挥自己创意的大脑，编写出各种各样奇妙的效果，下面是两个下拉列表，这里面的选项可以在两者之间通过按钮选择，进行移动，这也是一个很实用的功能，在你的网页中不妨设计一个看看效果。 选择移动 BODY {          font-size:12px;        ma
两个轮播滑块互相控制
09-10
两个轮播滑块互相控制 这里需要引用的css 和 js 都需要去http://www.swiper.com.cn/download/index.html swiper中文网下载 这个也是参照swiper例子以及api 改的
用jQuery实现两个select标签中元素之间的移动
香妹儿的博客
12-13 333
  代码如下：（注：jQuery 可自己在官网上下载） &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;script src="jquery-3.3.1.min.js"&gt;&lt
Jquery实现数据左右移动Demo
02-17
Jquery实现数据左右移动Demo，供大家一起共同分享学习。
ListBox(上移,下移,左移,右移)(全部是javascript)
MaoMao_1983的专栏
12-04 984
选择下拉菜单选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。北京上海山东安徽重庆福建甘肃广东广西贵州海南河北黑龙江河南湖北湖南内蒙古江苏江西吉林辽宁宁夏青海山西陕西四川天津西藏新疆云南浙江香港澳门台湾其他上移下移值：function moveOption(e1, e2){try{for(var i=0;iif(e1.options[i].sel
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
10-21
这段代码使用了jQuery的`hover`方法，它接受两个函数参数，分别对应鼠标进入和离开事件。`slideToggle`方法使得子菜单以平滑的动画效果在可见和不可见之间切换。`stop`方法确保在连续快速移动鼠标时，动画不会堆积。...
jQuery实现向下滑出的平滑下拉菜单效果
10-23
本篇文档介绍使用jQuery实现一个向下滑出的平滑下拉菜单效果，涉及的关键知识点如下： ### 1. jQuery基础使用 jQuery是一个轻量级的JavaScript库，它通过一个统一的API简化了HTML文档遍历、事件处理、动画和Ajax...
jQuery选项卡开关和下拉菜单代码.7z
11-29
"jQuery选项卡开关和下拉菜单代码.7z"这个压缩包提供了一种实现交互式UI（用户界面）元素的方法，特别是用于创建动态的选项卡切换和下拉菜单。下面将详细介绍这两个功能及其相关知识点。 首先，jQuery选项卡开关是...
jQuery实现两个select控件的互移操作
10-20
而在实际应用中，有时候需要实现两个select控件之间选项的动态移动，即用户可以将一个控件中的选项移动到另一个控件中，或者反之。这种功能通过纯JavaScript实现较为繁琐，而借助jQuery库则可以大大简化代码，提升...
jquery 无限级下拉菜单的简单实现代码
12-11
在这个例子中，我们将探讨如何使用jQuery来实现一个无限级的下拉菜单，通过解析JSON数据来动态生成菜单结构。 首先，我们需要理解JSON数据的结构。在给出的例子中，`menuData` 是一个包含多个对象的数组，每个对象...
jquery实现下拉框内容左右移动
03-27 3145
每天来看一下。博客写了没人看委屈，还是要坚持继续写下去呀，留着自己看哈 如题，下面先来说一下jquery实现下拉框中的内容左右移动的思路（个人理解） jquery代码（不考虑静态页面）先来考虑从左往右、 1、为“向左移动”这个按钮添加一个事件 2、获取左边的select的所有的option 3、判断哪些option被选中（option的一个属性selected，若为t
Jquery实现多选下拉列表左右移动
weixin_42623237的博客
03-04 1217
Jquery实现多选下拉列表左右移动 jquery实现核心代码 //需求：实现下拉列表选择条目左右选择功能 $(function () { //右移 $("#toRight").click(function () { //获取右边的下拉列表对象，append(左边选中的对象) $("#rightName").append($("#leftName > opt...
JQuery实现下拉框Select选项的左右移动
pan_junbiao的博客
10-24 1296
某网站的一个后台界面，在“负责频道”这个区域，用户可以通过按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。执行结果如下图： （1）页面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>负责频道</title> <meta name="author" cont
jquery两个div互换_Jquery 动态交换两个div位置并添加Css动画效果
weixin_39666550的博客
12-21 716
前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置，常见的思路大多是不考虑原始位置，直接采用append或者appendTo方式将两元素进行添加，该法未考虑原始位置，仅会添加为元素的最后一子元素。今天将给大家介绍一种位置交换方式(判断兄弟元素是否存在)，并添加简单的css效果。设计思路判断元素后边是否存在兄弟元素；存在则通过insertBefore方法将另一元素添加至其兄弟元素前，否则则...
使用jQuery对下拉列表框的选项进行移动demo
安静的对折的专栏
01-04 1701
用jQuery操作下拉列表框中的选项，可以进行单一移动，也可以多项进行移动 select { width: 100px; height: 150px; } $(function () { //全部移动到右边
html中左右移动选择框,js实现两个select下拉框选项左移右移_咋地 _前端开发者
weixin_36399495的博客
06-03 761
今天没事用Javascript代码/**选中的元素向右移动**/function moveRight(){//得到第一个select对象var selectElement = document.getElementById("first");var optionElements = selectElement.getElementsByTagName("option");var len = opt...
jQuery 怎么实现点击页面其他地方隐藏菜单？ 做了个按钮点击时弹出菜单，想实现点击其他地方时隐藏弹出的菜单
源码好优多
02-06 3832
菜单按钮 百度 $(".a").on("click", function(e){ if($(".menu").is(":hidden")){ $(".menu").show(); }else{ $(".menu").hide(); } $(document).one("click", function(){ $("
jQuery实现左右移动选项的下拉列表教程
本示例将展示如何利用jQuery创建一个可移动选项的左右下拉列表，使得用户能够方便地在两个下拉列表之间转移选项。 首先，我们需要理解基本的HTML结构，通常包含两个下拉列表（`<select>`元素），分别代表左侧和右侧...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值