javascript select控件间内容互相移动
Insert title here
function add(){
var opt=selectfrom.options;
len=opt.length;
for(i=len-1;i>-1;i--){
if(opt[i].selected){
select2.appendChild(opt[i]);
}
}
}
function addAll(){
var opt=selectfrom.options;
len=opt.length;
for(i=len-1;i>-1;i--){
select2.appendChild(opt[i]);
}
}
function del(){
var opt=select2.options;
len=opt.length;
for(i=len-1;i>-1;i--){
if(opt[i].selected){
selectfrom.appendChild(opt[i]);
}
}
}
function delAll(){
var opt=select2.options;
len=opt.length;
for(i=len-1;i>-1;i--){
selectfrom.appendChild(opt[i]);
}
}
a b c d e f g h i j k j m n |
> " style="width:40px" onclick="addAll()"/> " onclick="add()"/> |
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
下拉列表select 由左边框移动到右边示例
当页面还没有加载完的时候调用下面语句,会取不到"add" 这个对象,提示为空或不是对象 复制代码 代码如下: document.getElementById("add").onclick = function(){ alert("hello"); } 当使用便可取的对象 复制代码 代码如下: window.onload = function(){ document.getElementById("add").onclick =
-
jquery实现select选择框内容左右移动代码分享
本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,运行效果图: 具体代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>index</title> </head> <body> <
-
两个select多选模式的选项相互移动(示例代码)
如下所示: 复制代码 代码如下: <!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=
-
jquery select多选框的左右移动 具体实现代码
复制代码 代码如下: <!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=&quo
-
jQuery操作Select的Option上下移动及移除添加等等
复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**
-
JavaScript Select和Option列表元素上下左右移动
作者 马嘉楠 New Document var currentSel = null; function move(){ if(arguments.length==1){ moveUp(arguments[0]); }else if(arguments.length==2){ moveRight(arguments[0],arguments[1]); } } function moveUp(direction){ if(currentSel == null) return; var index =
-
基于jquery实现select选择框内容左右移动添加删除代码分享
本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图: ----------------------查看效果----------------------- 小提示:浏览
-
javascript select控件间内容互相移动
Insert title here function add(){ var opt=selectfrom.options; len=opt.length; for(i=len-1;i>-1;i--){ if(opt[i].selected){ select2.appendChild(opt[i]); } } } function addAll(){ var opt=selectfrom.options; len=opt.length; for(i=len-1;i>-1;i--){ select
-
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除select中选中的项 5修改select选项中 value="paraValue"的text为"paraText" 6设置select中text="paraText"的第一个Item为选中 7设置select中value="paraValue&qu
-
Javascript操作select控件代码实例
这篇文章主要介绍了Javascript操作select控件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 新增.修改.删除.选中.清空.判断存在等 1.判断select选项中 是否存在Value="paraValue"的Item function jsselectisexititem(objselect,objitemvalue) { var isexit = false; for(var i=0;i<objselect
-
HTML的select控件美化
CSS: .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; } .div-select-text > div { p
-
js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:
-
轻松使用jQuery双向select控件Bootstrap Dual Listbox
本文主要为大家介绍了双向select控件Bootstrap Dual Listbox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下: 效果图: 一.使用 1.引用css和js文件 <link href="scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> <
-
js window.print实现打印特定控件或内容
window.print可以打印网页,但有时候我们只希望打印特定控件或内容,怎么办呢? window.print打印指定div 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. 复制代码 代码如下: <html> <head> <script language="javascript"> function printdiv(printpage) { var headstr = "<html><head&g
-
Android实现EditText控件禁止输入内容的方法(附测试demo)
本文实例讲述了Android实现EditText控件禁止输入内容的方法.分享给大家供大家参考,具体如下: 问题: android如何实现EditText控件禁止往里面输入内容? 修改版解决方法: EditText editText = (EditText) findViewById(R.id.editText1); editText.setKeyListener(null); 看到这个问题大家可能有点奇怪了,EditText的功能不就是往上面写入内容吗? 再者,如果真要禁止输入文本,在布局文件中
-
模仿combox(select)控件,不用为美化select烦恼了。
不用整天为美化select控件烦恼了. 1.可批量美化select控件. 2.可以有onchange句柄. 3.触发onchange的函数可带参数. 3.可以得到select的值. 4.可设置像select类似的滚动条(如大于或等于8个数目时出现滚动条) 5.可设置宽度和高度 API参考: //首先生成一个simulateSelect的实例 //构造函数的第一个可选参数为触发onchange的函数,其它的为onchange函数的参数: c = new simulateSelect(s1oncha
-
支持IE,Firefox的javascript 日历控件
效果图:其实学习的方法,就是会搜索的方法,会搜索才能更快的解决问题.搜索方法: javascript 日历控件 site:jb51.net| 日期输入框演示-jb51.net script body{font-size:12px;font-family:Verdana,Arial,"宋体";} a:link {color:#464646;text-decoration:none;} a:visited {color:#464646;text-decoration:none;}ifram
随机推荐
- 防范非法用户入侵Win 2000/XP系统七招
- 2003 备份dns
- iis7.0命令行下列网站的物理目录的代码
- Java Web项目中实现文件下载功能的实例教程
- PHP简单实现上一页下一页功能示例
- ajax 检测用户名是否被占用
- 重置TSYS系统中的所有"生成的文件"成"未生成文件"
- C#类中的属性使用总结(详解类的属性)
- C#中 Json 序列化去掉null值的方法
- 通过先序遍历和中序遍历后的序列还原二叉树(实现方法)
- C语言实现图的搜索算法示例
- Android开发之获取短信验证码后按钮背景变化并且出现倒计时
- JavaScript高级程序设计 学习笔记 js高级技巧
- 一个新的CSS菜单代码
- 实例:尽可能写友好的Javascript代码
- jquery层级选择器的实现(匹配后代元素div)
- jquery <li>标签 隔若干行加空白或者加虚线的方法
- JavaScript中的toUTCString()方法使用详解
- vue-lazyload图片延迟加载插件的实例讲解
- docker使用阿里云镜像仓库的方法