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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 举例详解Java中的访问权限修饰符

    访问权限符: (1)public: 对于成员来说:任何其他类都可以访问它们,不管在同一个包中还是在另外的包中. 对于类来说:    也是一样. (2)friendly: 对于成员老说:如果一个类的成员没有任何权限修饰,那么它门就是缺省包访问权限,用friendly来表示,注 意friendly不是Java中的关键字,这里是个人喜欢的方式用它表示而已.同一个包内其它类可以访问,但包外 就不可以.对于同一个文件夹下的.没有用package的classes,Java会自动将这些classes初见为隶属

  • Java中成员方法与成员变量访问权限详解

    记得在一次面试的笔试题中,有的面试官会要求写出具体的像pullic这些访问限定符的作用域.其实,平常我都没去系统的考虑这些访问限定符的作用域,特别是包内包外的情况,OK,笔试不行了. 这是java基本的知识,也是公司看重的,那没办法啦,我的脑袋记不住东西,那我只能把这些东西写下来方便自己温故知新,不废话了,贴代码了. 代码如下: package com.jaovo; /** *_1_ 成员变量访问权限的求证 * public private protected default(默认的权限) *自

  • java web实现用户权限管理

    java web实现用户权限管理

    最近在做一个网站类型项目,主要负责后台,ui框架选型为jquery easy ui,项目架构为spring mvc + spring jdbc,简单易用好上手!搭建好框架后开始了第一个任务,设计并实现一套简单的权限管理功能. 一套最基本的权限管理包括用户.角色.资源. 实现效果: 数据库设计,设计如下: 用户:user 角色:role 用户-角色:user_role 资源:resource(包括上级菜单.子菜单.按钮等资源) 角色-资源:role_resource 标准的权限管理系统设计为以上5

  • java中使用Filter控制用户登录权限具体实例

    学jsp这么长时间,做的项目也有七八个了,可所有的项目都是用户登录就直接跳转到其拥有权限的页面,或者显示可访问页面的链接.使用这种方式来幼稚地控制访问权限.从来没有想过如果我没有登录,直接输入地址也可以直接访问用户的页面的. 在jsp中权限的控制是通过Filter过滤器来实现的,所有的开发框架中都集成有Filter,如果不适用开发框架则有如下实现方法: LoginFilter.java 复制代码 代码如下: public class LoginFilter implements Filter {

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

    本文实例讲述了javascript基于DOM实现权限选择的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>权限选择</title> &

  • JavaScript基于DOM操作实现简单的数学运算功能示例

    本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • javascript基于DOM实现省市级联下拉框的方法

    本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市级联下拉框</title

  • JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

    JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法

    本文实例讲述了JavaScript基于Dom操作实现查找.修改HTML元素的内容及属性的方法.分享给大家供大家参考,具体如下: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML.例如:改变HTML元素,改变HTML属性,改变CSS样式,事件响应. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C

  • JavaScript股票的动态买卖规划实例分析下篇

    目录 1. 最佳买卖股票时机含冷冻期 题目描述 题解 2. 买卖股票的最佳时机 III 题目描述 题解 1. 最佳买卖股票时机含冷冻期 题目描述 给定一个整数数组prices,其中第prices[i]表示第i天的股票价格 . 设计一个算法计算出最大利润.在满足以下约束条件下,你可以尽可能地完成更多的交易(多次买卖一支股票): 卖出股票后,你无法在第二天买入股票 (即冷冻期为 1 天). 注意:你不能同时参与多笔交易(你必须在再次购买前出售掉之前的股票). 示例 1: 输入: prices = [

  • JavaScript事件委托原理与用法实例分析

    本文实例分析了JavaScript事件委托原理与用法.分享给大家供大家参考,具体如下: 在日常中,我们可能会听到事件委托这样的概念,有些同学可能对事件委托已经很了解了,也有些同学可能只是听过事件委托,只是会简单的使用,但是对于事件委托的原理不怎么知道.所以该博文会解释一下原生js的事件委托的原理,为什么会有事件委托,为什么可以这样用事件委托等等问题. 1. js中的事件流 在解析事件委托之前,我们先回顾一下js中的事件流,即冒泡和捕获. ① .冒泡:当下级节点触发某个事件的时候,该事件会逐级向上

  • JQuery实现带排序功能的权限选择实例

    本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】

    本文实例讲述了JavaScript引用类型之基本包装类型.分享给大家供大家参考,具体如下: 为了操作基本类型值,ECDMAScript提供了3个特殊的引用类型--基本包装类型Boolean.Number和String.每当读取一个基本类型值时,后台会创建一个对应的基本包装类型的对象. var str = "Hello world"; var substr = str.substring(); 等价于 var str = new String("Hello world"

  • JavaScript股票的动态买卖规划实例分析上篇

    目录 1. 买卖股票的最佳时机 题目描述 题解 2. 买卖股票的最佳时机 II 题目描述 题解 3. 买卖股票的最佳时机含手续费 题目描述 题解 1. 买卖股票的最佳时机 题目描述 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格. 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票.设计一个算法来计算你所能获取的最大利润. 返回你可以从这笔交易中获取的最大利润.如果你不能获取任何利润,返回 0 . 示例 1: 输

  • JavaScript面向对象之私有静态变量实例分析

    本文实例分析了JavaScript面向对象之私有静态变量.分享给大家供大家参考,具体如下: 大家知道,私有实例变量的原理是根据作用域. 私有实例变量是在Javascript的function内部用var关键字实现,只在function内部有效. 仿照这个,提出私有静态变量的解决方案: <script language="javascript" type="text/javascript"> var JSClass = (function() { var

随机推荐