<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>
界面如下图
![](http://img.blog.csdn.net/20130815135707812?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRteWhvbWUxOTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
首先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--;
}
}
}
}
分享到:
相关推荐
调用#include 头文件,使用左移右移命令
易语言左移右移源码.rar 易语言左移右移源码.rar 易语言左移右移源码.rar 易语言左移右移源码.rar 易语言左移右移源码.rar 易语言左移右移源码.rar
易语言左移右移口算公式源码,左移右移口算公式,左移_子程序,右移_子程序
第四章4广告灯的左移右移.doc第四章4广告灯的左移右移.doc
易语言汇编实现左移右移模块源码,汇编实现左移右移模块,asm_rol,asm_ror,asm_rcl,asm_rcr,asm_shl,asm_shr,asm_not
易语言源码易语言汇编实现左移右移模块源码.rar 易语言源码易语言汇编实现左移右移模块源码.rar 易语言源码易语言汇编实现左移右移模块源码.rar 易语言源码易语言汇编实现左移右移模块源码.rar 易语言源码易语言...
单片机原理及接口技术;广告灯的左移右移,(取表方式)
13-双灯左移右移闪烁(51单片机C语言实例Proteus仿真和代码)13-双灯左移右移闪烁(51单片机C语言实例Proteus仿真和代码)13-双灯左移右移闪烁(51单片机C语言实例Proteus仿真和代码)13-双灯左移右移闪烁(51单片机C语言...
与大家一起分享,基于51单片机的广告灯左移右移仿真。
jquery 实现的 select 上移、下移、左移、右移功能 下载下来直接预览效果
跑马灯可以实现右移左移分别两次,闪烁两次,有图,程序结合protues的图
2个led灯先左移,然后右移,然后同时闪烁。使用多个for循环实现。
易语言左移右移源码.zip这个是易语言源码,希望是你需要的例程,只有学习才会进步,感谢你的关注。谢谢
一个广告灯左移右移程序设计,实现灯的花样亮,先从左边亮,再从右循环回来
易语言源码易语言左移右移源码.rar 易语言源码易语言左移右移源码.rar 易语言源码易语言左移右移源码.rar 易语言源码易语言左移右移源码.rar 易语言源码易语言左移右移源码.rar 易语言源码易语言左移右移源码....
适合初学者的用c语言编的双灯左移右移流水灯
单片机C语言实例--13-双灯左移右移闪烁.zip
易语言汇编实现左移右移模块源码.zip易语言项目例子源码下载易语言汇编实现左移右移模块源码.zip易语言项目例子源码下载 1.合个人学习技术做项目参考 2.适合学生做毕业设计参考 3.适合小团队开发项目参考
易语言汇编实现左移右移模块源码。@易语言入门教程。
原理:做单一灯的左移右移,八个发光二极管L1-L8分别接在单片机的P1.0-P1.7接口上,输出“0”时,发光二极管亮,开始时P1.0→P1.1→P1.2→P1.3→┅→P1.7→P1.6→┅→P1.0亮,重复循环。