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 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 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 workerman定时任务的实现代码
2018/12/23 PHP
js option删除代码集合
2008/11/12 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python画图常规设置方式
2020/03/05 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
护理专业大学生自我推荐信
2014/01/25 职场文书
公司员工活动策划方案
2014/08/20 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
教师调动申请报告
2015/05/18 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python