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" οnclick="left()"><br>
<input type="button" value="<<" style="font-size:10pt;width:35px" οnclick="left(true)"><br>
<input type="button" value=">" style="font-size:10pt;width:35px" οnclick="right()"><br>
<input type="button" value=">>" style="font-size:10pt;width:35px" οnclick="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实现左移右移
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>完成左移右移</tit ...
- 初识 jquery.simulate.js 模拟键盘事件
用jquery 和 jquery.simulate.js 实现模拟键盘事件,点击上下左右div相当于点击键盘的上下左右键 <!DOCTYPE html> <html><h ...
- HTML5如何将列表向左右移,分类列表左移右移操作
js操作列表左右移动,代码如下: 分类列表左移右移操作 选项1 选项2 选项3 选项4 选项5 选项6 选项7 选项8 选项9 // document.getElementById("add ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- 用jQuery作为JS对象从选项中添加选项的最佳方法是什么?
使用jQuery从JavaScript对象向<select>添加选项的最佳方法是什么? 我正在寻找不需要插件的东西,但是我也对那里的插件感兴趣. 这是我所做的: selectValues ...
- jquery.form.js ajax提交上传文件
项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...
- jquery.chosen.js实现模糊搜索
jquery.chosen.js查询时,chosen默认从第一个字符搜索,所以写中间的字符搜索时,是搜索不出来的 若想实现中间字符的模糊查询,下面的js中(search_contains属性为true ...
- form提交--jquery.form.js
jquery.form.js 官网 http://www.malsup.com/jquery/form/ 先写一个简单的form,提交后在后台打印参数. formsubmit.jsp <%@ ...
最新文章
- 数据库性能分析及调整一例
- SNMP之管理信息库
- ML之PLiR之LARS:利用LARS算法求解ElasticNet回归类型问题(实数值评分预测)
- linux内核同步之信号量、顺序锁、RCU、完成量、关闭中断【转】
- 回流Reflow和重绘Repaint
- 生活需要懂点技巧…懂点策略…懂点计谋……【心灵悟语】
- 机械硬盘低级格式化软件_万能硬盘低格工具(支持所有IDE、SATA、移动硬盘)
- 幸运福彩3d 是什么
- java微信录音arm转mp3_使用FFmpeg将微信录音 amr格式 转 MP3格式
- html5在线裁剪,HTML5 本地裁剪图片并上传至服务器(老梗)
- 【论文笔记】ParaDetox:Detoxifification with Parallel Data
- 一个可以不被广告拦截器拦截的弹出窗口
- Linux小技巧之终端快捷键大全
- 全国青少年软件编程等级考试scratch二级考试大纲+考点
- 用好这几招,让你的代码洋溢着 Pythonic 的味道
- React中CSS样式
- docker问题备忘:rpc error: code = 2 desc = containerd: container not found
- 微信小程序 扫描微信二维码 传递参数授权
- u盘启动盘安装win11系统
- 软件宝宝系列——SQL注入篇
热门文章
- 手把手教你软渲染 #2 - 两大直线算法
- 算法基础之差分 学习笔记
- 八大主流云管理平台对比导购
- 项目经理经典面试题,学完你也是大经理!
- vs2010不能正确加载 #39;VSTS for Database Professionals Sql Server Data-tier Application#39;包
- Python制作简单的滑雪小游戏
- android 贴纸 源码,超简单集成HMS ML Kit 人脸检测实现可爱贴纸
- 前段ui需要些html代码吗,UI设计师为什么要了解前端代码?
- 医学图像相关公开数据集
- 1034 糖果分享游戏