jquery以及js实现option左移右移

来源：互联网发布：美影美视软件的教程编辑：程序博客网时间：2024/05/17 22:46

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