权限选择功能从一个select到另一个select

javascript代码：

function movesome(selectSrc, selectTar) {//selectSrc为源对象，selectTar为目标对象 for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) { var option = selectSrc.childNodes[i]; if (option.selected==true) { selectSrc.removeChild(option); selectTar.appendChild(option); option.selected = false; } } } function moveall(selectSrc, selectTar) {//selectSrc为源对象，selectTar为目标对象 for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) { var option = selectSrc.childNodes[i]; selectSrc.removeChild(option); selectTar.appendChild(option); } }

网页内容：

<select size="4" style="width:50px;" multiple="multiple" id="select1"> <option>添加</option> <option>删除</option> <option>更改</option> <option>浏览</option> </select> <input type="button" value=">" οnclick="movesome(document.getElementById('select1'),document.getElementById('select2'))" /><input type="button" value="<" οnclick="movesome(document.getElementById('select2'),document.getElementById('select1'))" /><input type="button" value=">>" οnclick="moveall(document.getElementById('select1'),document.getElementById('select2'))" /><input type="button" value="<<" οnclick="moveall(document.getElementById('select2'),document.getElementById('select1'))" /> <select size="4" style="width:50px;" multiple="multiple" id="select2"> </select>

 

Jquery版

$("#movetoright").click(function () { var items = $("#select1 option:selected").remove(); $("#select2").append(items); $("#select2 option").attr("selected", false); //清除option移动到右侧的自动选中的状态 }); $("#movetoleft").click(function () { var items = $("#select2 option:selected").remove(); $("#select1").append(items); $("#select1 option").attr("selected", false); //清除option移动到右侧的自动选中的状态 }); $("#movealltoright").click(function () { var items = $("#select1 option").remove(); $("#select2").append(items); $("#select2 option").attr("selected", false); //清除option移动到右侧的自动选中的状态 }); $("#movealltoleft").click(function () { var items = $("#select2 option").remove(); $("#select1").append(items); $("#select1 option").attr("selected", false); //清除option移动到右侧的自动选中的状态 });

 

网页内容：

<select size="4" style="width:50px;" multiple="multiple" id="select1"> <option>添加</option> <option>删除</option> <option>更改</option> <option>浏览</option> </select> <input type="button" value=">" id="movetoright" /><input type="button" value="<" id="movetoleft" /><input type="button" value=">>" id="movealltoright" /><input type="button" value="<<" id="movealltoleft" /> <select size="4" style="width:50px;" multiple="multiple" id="select2"> </select>