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

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

2020-11-27 21:02:30 责编:小采

<html> 
<head> 
<title></title> 
 
//移动所有项。 
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> 
<div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?de973f4fc4fc27c651135a4cd7781c2b";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div></body> 
</html>

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

下载本文

显示全文

全部频道