javascript基于DOM实现权限选择实例分析


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript基于DOM实现权限选择的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>权限选择</title>
<script type="text/javascript">
//====================多选操作====================================
function selMultiple(selectSrc, selectDes) {
  for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) {
    var option = selectSrc.childNodes[i];
    if (option.selected == true) {
      selectSrc.removeChild(option);
      option.selected = false;
      selectDes.appendChild(option);
    }
  }
}
function selectToRight() {
  var selectSrc = document.getElementById("select1");
  var selectDes = document.getElementById("select2");
  selMultiple(selectSrc, selectDes);
}
function selectToLeft() {
  var selectSrc = document.getElementById("select2");
  var selectDes = document.getElementById("select1");
  selMultiple(selectSrc, selectDes);
}
//====================全选操作====================================
function selAll(selectSrc, selectDes) {
//      这种写法有问题,发现selectSrc.childNodes.length居然等于10,实际上只有5个元素
//      for (var i = 0; i < selectSrc.childNodes.length; i++) {
//        var option = selectSrc.childNodes[0];
//        selectSrc.removeChild(option);
//        selectDes.appendChild(option);
//      }
  var options = selectSrc.getElementsByTagName("option");
  var optLength = options.length;
  /*
  注意:for循环中不能直接使用options.length,因为selectDes.appendChild执行后
  会导致options.length减一,所以先把options.length存放到一个变量中备用
  */
  for (var i = 0; i < optLength; i++) {
    var option = options[0]; //这里使用的始终是第0个元素
    selectDes.appendChild(option);
  }
  selectSrc.options.length = 0;
}
function selectToRightAll() {
  var selectSrc = document.getElementById("select1");
  var selectDes = document.getElementById("select2");
  selAll(selectSrc, selectDes);      
}
function selectToLeftAll() {
  var selectSrc = document.getElementById("select2");
  var selectDes = document.getElementById("select1");
  selAll(selectSrc, selectDes);    
}
</script>
</head>
<body>
<select id="select1" multiple="multiple" style="float:left;width:100px;height:200px;">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>保存</option>
<option>查询</option>
</select>
<div style="float:left;width:50px;">
<input type="button" style="float:left;width:100%;" value=">" onclick="selectToRight()" />
<input type="button" style="float:left;width:100%;" value="<" onclick="selectToLeft()" />
<input type="button" style="float:left;width:100%;" value=">>" onclick="selectToRightAll()" />
<input type="button" style="float:left;width:100%;" value="<<" onclick="selectToLeftAll()" />
</div>
<select id="select2" multiple="multiple" style="float:left;width:100px;height:200px"></select>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
javascript中DOM复选框选择用法实例
May 14 #Javascript
JS对字符串编码的几种方式使用指南
May 14 #Javascript
jQuery的基本概念与高级编程
May 14 #Javascript
javascript实现简单的省市区三级联动
May 14 #Javascript
javascript实现仿腾讯游戏选择
May 14 #Javascript
JavaScript实现Flash炫光波动特效
May 14 #Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 #Javascript
You might like
php的一些小问题
2010/07/03 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python执行时间的计算方法小结
2017/03/17 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
django正续或者倒序查库实例
2020/05/19 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
美国休闲服装品牌:Express
2016/09/24 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
电子商务毕业生求职信
2013/11/10 职场文书
个人对照检查材料
2014/02/12 职场文书
市场部经理岗位职责
2014/04/10 职场文书
英语邀请函范文
2015/02/02 职场文书
2015党建工作简报
2015/07/21 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang