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给服务器(前提是 ...
随机推荐
- UIDocumentInteractionController 文件预览
//创建并从底部弹出来 - (void)viewDidLoad { [super viewDidLoad]; [self setupDocumentControllerWithURL:fileURL] ...
- CSharp设计模式读书笔记(23):模板方法模式(学习难度:★★☆☆☆,使用频率:★★★☆☆)
模板方法模式:定义一个操作中算法的框架,而将一些步骤延迟到子类中.模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 模式角色与结构: 实现代码: using System; ...
- 使用Visual Studio创建映像向导(Image Sprite)——Web Essential
原版的:Creating Image Sprite in Visual Studio - Web Essential 译者注:有关图片精灵的信息请參阅http://baike.baidu.com/vi ...
- 严重:IOException while loading persisted sessions:java.io.EOFException.
1.错误叙述性说明 严重:IOException while loading persisted sessions:java.io.EOFException. java.io.EOFException ...
- PLSQL_监控有些SQL的执行次数和频率
原文:PLSQL_监控有些SQL的执行次数和频率 2014-12-25 Created By 鲍新建
- 吐槽一下项目中的代码坏味道:滥用java常量
我们的项目中是否充斥着类似以下的代码呢?定义一个专门存放常量的java类(接口),非常多其它类依赖该常量类. public interface IConstant { int ZERO = 0; St ...
- 小结css2与css3的区别
CSS3引进了一些新的元素新的特性,我收集以下,自己做了一个小结: animation(基础动画)eg: div{animation: myfirst 5s linear 2s infinite a ...
- 删除Python UserWarning[已解决]
在使用MySQLdb包后,导入测试时发现一个警告. /usr/lib/python2.6/site-packages/setuptools-0.8-py2.6.egg/pkg_resources.py ...
- lucent检索技术之创建索引:使用POI读取txt/word/excel/ppt/pdf内容
在使用lucent检索文档时,必须先为各文档创建索引.索引的创建即读出文档信息(如文档名称.上传时间.文档内容等),然后再经过分词建索引写入到索引文件里.这里主要是总结下读取各类文档内容这一步. 一. ...
- Keil中使用宏编译来定义DEBUG输出
使用宏编译来格式化调试信息,是一个不错的方法,即可以在需要的时候打印出信息,还可以格式化我们所需要的输出. #define DEBUG 1 #if (DEBUG == 1) #define DBG(A ...