JQUERY双下拉框内容的左右移动

教程源码:http://bbs.php100.com/read-htm-tid-74060.html
用到的方法为:appendTo()
格式:$(content).appendTo(selector)
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项,删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
JQUERY双下拉框内容的左右移动的更多相关文章
- jQuery之双下拉框
双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- JQuery打造下拉框联动效果
做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...
- jQuery操作下拉框的text值和val值
jQuery操作下拉框的text值和val值 1,JS源码 <select name="select1" id="select1" style=" ...
- js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
- jquery对下拉框的操作
jQuery对下拉框的操作 /获取第一个option的值 $('#test option:first').val(); //最后一个option的值 $('#test option:last').v ...
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- jQuery对下拉框Select操作总结
jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...
随机推荐
- SQL中获取排序分组后数据的脚本
废话不多说了,先上一段代码,如下所示: select distinct b.OrgID,b.CompanyID,b.AreaID,b.CustChannelID,b.CustID,b.SaleTo ...
- [译]async/await中使用阻塞式代码导致死锁 百万数据排序:优化的选择排序(堆排序)
[译]async/await中使用阻塞式代码导致死锁 这篇博文主要是讲解在async/await中使用阻塞式代码导致死锁的问题,以及如何避免出现这种死锁.内容主要是从作者Stephen Cleary的 ...
- 你的应用是怎样被替换的,App劫持病毒剖析
一.App劫持病毒介绍 App劫持是指运行流程被重定向,又可分为Activity劫持.安装劫持.流量劫持.函数运行劫持等. 本文将对最近利用Acticity劫持和安装劫持的病毒进行分析. 二.Acti ...
- python selenium expected_conditions使用实例
今天正好虫师问到selenium python binding中support.expected_conditions的用法,顺手总结了一下,希望对大家有所帮助. 场景 Expected Condit ...
- 向量运算 与 JavaScript
二维向量都包含两个值:方向(direction)及大小(magnitude) 这两个值可以表达出各种各样的物理特性来,比如力和运动.如两个物体间的碰撞检测. 向量的大小 虽说二维向量是对大 ...
- java对存放实体的list进行排序
java对存放实体的list进行排序: List<DistributionAgentsEntity> allAgents = new ArrayList<DistributionAg ...
- Vivado抓取信号
作者:桂. 时间:2018-05-03 21:16:03 链接:www.cnblogs.com/xingshansi/p/8987608.html 前言 FPGA调试需要抓取特定信号,一个直观的思路 ...
- Spring 注解@Component,@Service,@Controller,@Repository
Spring 注解@Component,@Service,@Controller,@RepositorySpring 2.5 中除了提供 @Component 注释外,还定义了几个拥有特殊语义的注释, ...
- Subversion代码提交中的org.apache.subversion.javahl.ClientException: svn: E200007: Commit failed异常解决
: 在切换subversion服务器地址之后,发生的无法正确提交代码的问题org.apache.subversion.javahl.ClientException: svn: E200007: Com ...
- Android build.gradle
apply plugin: 'com.android.application' android { /*编译版本 , 因此我们强烈推荐总是使用最新的 SDK 进行编译 targetSdkVersion ...