jquery以及js实现option左移右移
<table cellspacing="1" width="350px" align="center">
<tr>
<td>
<table style="background-color:white" width="100%">
<tr>
<td>
<fieldset>
<legend>审核人员</legend>
<select name="left_select" multiple="multiple" size="10" id="left_select" style="width : 152px">
</select>
</fieldset>
</td>
<td>
<input type="button" value="<" style="font-size:10pt;width:35px" onclick="left()"><br>
<input type="button" value="<<" style="font-size:10pt;width:35px" onclick="left(true)"><br>
<input type="button" value=">" style="font-size:10pt;width:35px" onclick="right()"><br>
<input type="button" value=">>" style="font-size:10pt;width:35px" onclick="right(true)"><br>
</td>
<td>
<fieldset>
<legend>系统人员</legend>
<select name="right_select" multiple="multiple" style="width : 152px" size="10" id="right_select">
<option value="zhangsan">zhangsan</option>
<option value="lisi">lisi</option>
<option value="lisi">lisi</option>
<option value="wangwu">wangwu</option>
</select>
</fieldset>
</td>
</tr>
</table>
</td>
</tr>
</table>
界面如下图
首先jquery第一种方法:
//isAll 是否全部移动
function left(isAll){
var os = new Array();
os = $("#right_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
var o = new Option(os[i].text,os[i].value);
$("#left_select").append(o);
$("#right_select").find("option").remove();
// == $("#right_select").empty();
}else{
if(os[i].selected){
var o = new Option(os[i].text,os[i].value);
$("#left_select").append(o);
$("#right_select").find("option:selected").remove();
}
}
}
}
function right(isAll){
var os = new Array();
os = $("#left_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
var o = new Option(os[i].text,os[i].value);
$("#right_select").append(o);
$("#left_select").find("option").remove();
// == $("#left_select").empty();
}else{
if(os[i].selected){
var o = new Option(os[i].text,os[i].value);
$("#right_select").append(o);
$("#left_select").find("option:selected").remove();
}
}
}
}
第二种方法:
/**
* 此方法 移动的时候会自动删除 不用手动去 remove
* 但移走的选项会默认选中 无法取消,代码虽少,效果但不如第一种
*/
function left(isAll){
var os = new Array();
os = $("#right_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
$("#left_select").append(os[i]);
}else{
if(os[i].selected){
$("#left_select").append(os[i]);
}
}
}
}
function right(isAll){
var os = new Array();
os = $("#left_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
$("#right_select").append(os[i]);
}else{
if(os[i].selected){
$("#right_select").append(os[i]);
}
}
}
}
JS实现如下:
function left(isAll)
{
var os=new Array();
os=document.getElementById("right_select").options;
for(i=0;i<os.length;i++){
if(isAll){
var o=new Option(os[i].text,os[i].value);
document.getElementById("left_select").add(o);
document.getElementById("right_select").remove(i);
i--;
}else{
if(os[i].selected){
var o=new Option(os[i].text,os[i].value);
document.getElementById("left_select").add(o);
document.getElementById("right_select").remove(i);
i--;
}
}
}
}
function right(isAll)
{
var os=new Array();
os=document.getElementById("left_select").options;
for(i=0;i<os.length;i++){
if(isAll){
var o=new Option(os[i].text,os[i].value);
document.getElementById("right_select").add(o);
document.getElementById("left_select").remove(i);
i--;
}else{
if(os[i].selected){
var o=new Option(os[i].text,os[i].value);
document.getElementById("right_select").add(o);
document.getElementById("left_select").remove(i);
i--;
}
}
}
}
jquery以及js实现option左移右移的更多相关文章
- jQuery实现左移右移
<html> <head> <meta charset="utf-8"> <title>完成左移右移</title> & ...
- JS & JQuery 动态添加 select option
因为是转载文章 在此标明出处,以前有文章是转的没标明的请谅解,因为有些已经无法找到出处,或者与其它原因. 如有冒犯请联系本人,或删除,或标明出处. 因为好的文章,以前只想收藏,但连接有时候会失效,所以 ...
- select多选左移右移的实现
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 初识 jquery.simulate.js 模拟键盘事件
用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html> < ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jquery.validate.js插件使用
jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- 【转】jquery.cookie.js的使用
Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器(前提是 ...
随机推荐
- 后台自动启动appium
首先说明,本人用的exe方式安装的appium. 新建一个.vbs文件,写入以下脚本,记得把D盘换成你自己的盘符. 1.后面taskkill好像没有实际作用..加就加了吧. Set ws = Crea ...
- REUSEADDR 选项
一般而言,对于处理2MSL状态的套接字(一般为服务端套接字)是不允许接受从同一客户端重新发起一个新的连接的,但是套接字编程系统接口允许应用程序通过设置一个REUSEADDR选项,使处于2MSL状态的套 ...
- The Swift Programming Language-官方教程精译Swift(2)基础知识
Swift 的类型是在 C 和 Objective-C 的基础上提出的,Int是整型:Double和Float是浮点型:Bool是布尔型:String是字符串.Swift 还有两个有用的集合类型,Ar ...
- HTML5新增核心工具——canvas
原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...
- 使用Canvas基于手势可以使树秋千
用Canvas制作能够依据手势摆动的树 依据工作的须要.制作一个摆动的树做为页面的背景.为了添加页面的交互性,我又为背景中的树添加了鼠标(触控)事件,使他可以依据鼠标(触控)做出对应的动作,当手指做上 ...
- Android的5样的调试信息
Android的5样的调试信息 华清2014-10-23 北京海淀区 张俊浩 verbose:只是滤全部的信息. 啰嗦的意思. debug:debug调试的意思. info:一般提示的信息inf ...
- windows tcp端口映射或端口转发
windows tcp端口映射或端口转发 windows内部有一个叫netsh的玩意,可以把tcp端口进行映射或转发,可惜不支持udp.举个例子:一台windows有一个80端口,对外可以访问.另有一 ...
- Visual Studio 单元测试之四---Generic测试
原文:Visual Studio 单元测试之四---Generic测试 这里的Generic我觉得理解为外部测试更合适.因为在这种测试模式下Visual Studio只是启动一个外部的程序,然后通过返 ...
- Linux启用/关闭触摸板脚本
一个可以启动关闭触摸板的shell脚本 运行一次关闭,再次运行开启. [shell] #!/bin/bash ts=`synclient -l|grep TouchpadOff` ts=${ts#*= ...
- Web前端框架与类库
Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...