当前位置：Gxlcms > JavaScript > js模拟权限选择实现代码(select操作)_表单特效

js模拟权限选择实现代码(select操作)_表单特效

时间：2021-07-01 10:21:17 帮助过：3人阅读

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
//移动所有项。 
function moveAllOptions(selone, seltwo) { 
//获得selone中的每个option 
var opts = selone.getElementsByTagName('option'); 
//这种循环有问题，不能从0开始，因为opts就像集合一样， 
//每次将自己的元素加到别的元素下的时候这个元素就从自己子元素中自动删除。 
// for (var i = 0; i < opts.length; i++) { 
// //将selone中的每个option都加到了seltwo中。 
// seltwo.appendChild(opts[i]); 
// } 
for (var i = opts.length - 1; i >= 0; i--) { 
//将selone中的每个option都加到了seltwo中。 
seltwo.appendChild(opts[i]); 
} 
} 
//移动选中项 
function moveSelectedOptions(selone, seltwo) { 
//获取第一个元素中的所有的option 
var opts = selone.getElementsByTagName('option'); 
for (var i = opts.length - 1; i >= 0; i--) { 
if (opts[i].selected == true) { 
seltwo.appendChild(opts[i]); 
} 
} 
} 
</ script> 
</head> 
<body> 
<select id="selNum1" multiple="multiple"> 
<option>添加</option> 
<option>修改</option> 
<option>删除</option> 
<option>保存</option> 
</select> 
<input type="button" name="name" value=">>" onclick="moveAllOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" /> 
<input type="button" name="name" value=">" onclick="moveSelectedOptions(document.getElementById('selNum1'),document.getElementById('selNum2'));" /> 
<input type="button" name="name" value="<" onclick="moveSelectedOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" /> 
<input type="button" name="name" value="<<" onclick="moveAllOptions(document.getElementById('selNum2'),document.getElementById('selNum1'));" /> 
<select id="selNum2" multiple="multiple"> 
</select> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js模拟权限选择实现代码(select操作)_表单特效

人气教程排行