左右列表转移

来源：互联网发布：pdf expert mac破解版编辑：程序博客网时间：2024/05/29 14:50
<%@ page language="java" contentType="text/html; charset=gbk"pageEncoding="gbk"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>Insert title here</title><style type="text/css">* {font-family: Tahoma, Arial, serif;font-size: 11pt;line-height: 25px;}body {text-align: center;min-width: 760px;}#main {width: 720px;margin: 0 auto;text-align: left;}#main div {width: 30%;display: inline;}#main div input {position: absolute;left: 420px;}p {text-indent: 2em;}select {width: 120px;}</style><script type="text/javascript"> function $(id) { return document.getElementById(id); }  function moveRight() { // 获取左侧列表框 var leftSide = $("left"); // 获取右侧列表框 var rightSide = $("right"); // 左侧列表框的选项集合 var options = leftSide.options; // 遍历所有的选中项 for (var i = 0; i < options.length; i++) { // 选中项   if (options[i].selected) {   // 将选项移动到右侧列表中   rightSide.appendChild(options[i]);   // 此时options 集合的元素已经不包含被移动的元素,索引值必须减去1   } } }  // 需要特别说明的是,对options集合的修改是实时的,例如,将options 中的某个选项移动到另外一个列表框以后,options集合中将不在包含该选项 // 同时options 集合的 length 属性值会减去 1 function moveRightAll() { // 左侧列表框 var leftSide = $("left"); // 右侧列表框 var rightSide = $("right"); // 将所有左侧选项移动到右侧 while (leftSide.options.length > 0) { rightSide.appendChild(leftSide.options[0]); } }</script></head><body><div id="main"><div><select id="left" size="10" multiple="multiple"><option value="a">选项A</option><option value="b">选项B</option><option value="c">选项C</option><option value="d">选项D</option><option value="e">选项E</option><option value="f">选项F</option><option value="g">选项G</option></select></div><div><input type="button" value="右移" style="top: 20px"onclick="moveRight();"><input type="button" value="左移" style="top: 70px"onclick="moveLeft();"><input type="button" value="全部右移" style="top: 120px"onclick="moveRightAll();"><input type="button" value="全部左移" style="top: 170px"onclick="moveLeftAll();"></div><div style="left: 100px; position: relative;"><div><select id="right" size="10" multiple="multiple"></select></div></div></div></body></html>
阅读全文
0 0