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 Object与Function使用
Jan 11 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
ECMAScript6--解构
Mar 30 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 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
yii操作session实例简介
2014/07/31 PHP
PHP多进程编程实例
2014/10/15 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
matplotlib实现区域颜色填充
2019/03/18 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
linux系统都有哪些运行级别
2012/04/15 面试题
EJB的激活机制
2013/10/25 面试题
应届生煤化工求职信
2013/10/21 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
党员公开承诺事项
2014/03/25 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
对照检查剖析材料
2014/09/30 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
职工培训工作总结
2015/08/10 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
使用Python解决图表与画布的间距问题
2022/04/11 Python
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技