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( ...
随机推荐
- FFmpeg 滤镜及其效果
原文地址:https://blog.csdn.net/dangxw_/article/details/49001413 代码中使用滤镜参见上一篇博客:http://blog.csdn.net/dang ...
- thinkphp C函数的实现原理
在写一个php原生函数的时候,想起使用thinkphp的C函数读取数据库配置非常方便,于是看了看源码的实现,原理很简单,分享一下: 下面是common.php,实现了C函数: if(is_file(& ...
- Installation error: INSTALL_FAILED_CONFLICTING_PROVIDER 解决方案
主要是由于调试的环境中已有一个同名的Provider存在. 解决方法是修改AndroidManifest.xml中的 <provider android:name=".apps.App ...
- MongodDB---初识
NoSQL介绍 一.NoSQL简介 NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库. 非关系型数据库主要有这些特点:非关系型的.分布式的.开源的.水平可扩展的. 原始的目的是为 ...
- Java 8 – Filter a null value from a Stream
Java 8 – Filter a null value from a Stream package com.mkyong.java8; import java.util.List;import ja ...
- android AlertDialog设置点击button不退出(转)
转载于http://blog.csdn.net/csh159/article/details/8127280 使用的是java里面的反射机制: dialog = new AlertDialog.Bui ...
- ES2017 中的 Async 和 Await
ES2017 在 6 月最终敲定了,随之而来的是广泛的支持了我最喜欢的最喜欢的JavaScript功能: async(异步) 函数.如果你也曾为异步 Javascript 而头疼,那么这个就是为你设计 ...
- HTML5学习笔记(二十二):DOM
DOM即文档对象模型(Document Object Model),其定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构,如下: 通过DOM,开发人员可以动态的添加. ...
- 在sublime text3中安装git插件
使用Package Control组件(推荐),打开install package控制台后,直接输入git就可以安装git插件. 这个时候Sublime Text只是安装了git插件,但还不能使用gi ...
- Gartner 2018新技术成熟度曲线
https://blog.csdn.net/BtB5e6Nsu1g511Eg5XEg/article/details/82047719 近日,Gartner发布了2018年新技术成熟度曲线,首次将生物 ...