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--; } } } }