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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
七个很有意思的PHP函数
May 12 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
JQuery中使文本框获得焦点的方法实例分析
Feb 28 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
JS实现的排列组合算法示例
Jul 16 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 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的access操作类
2008/04/09 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
公司领导推荐信
2013/11/12 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
运动会宣传口号
2014/06/09 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
学生会个人总结范文
2015/02/15 职场文书
详解Redis复制原理
2021/06/04 Redis
2022年四月新番
2022/03/15 日漫