基于javascript实现单选及多选的向右和向左移动实例
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例。分享给大家供大家参考。具体实现方法如下：
方法 一：
<body>
<h1>实现单选及多选的向右和向左移动</h1>
<div id="lst">
<span>
<select id="lselect" size="10" multiple="multiple" style="width: 100px; background-color:blue;">
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
<option>选项10</option>
</select>
<span style="width: 200px;height: 100px;">
<input type="button" value="单个向右移动" onclick="oneRMove()" />
<input type="button" value="多个向右移动" onclick="moveRMove()" />
<input type="button" value="单个向左移动" onclick="oneLMove()" />
<input type="button" value="多个向左移动" onclick="moveLMove()" />
</span>
<span>
<select id="rselect" size="10" style="width: 100px;background-color: yellow;" multiple="multiple">
</select>
</span>
</span>
</div>
</body>
<script type="text/javascript">
window.onload = function(){}
//获取select对象
var lselect=document.getElementById("lselect");
var rselect=document.getElementById("rselect");
//获取lselect和roptions对象中的所有option
var loptions=lselect.options;
var roptions=rselect.options;
function oneRMove(){
for(var i=0;i<loptions.length;i++){
var op=loptions[i];
if(op.selected){
rselect.appendChild(op);
break;
}
}
}
function moveRMove(){
for(var i=0;i<loptions.length;i++){
var op=loptions[i];
if(op.selected){
rselect.appendChild(op);
i--;
}
}
}
function oneLMove(){
for(var i=0;i<roptions.length;i++){
var op=roptions[i];
if(op.selected){
lselect.appendChild(op);
break;
}
}
}
function moveLMove(){
for(var i=0;i<roptions.length;i++){
var op=roptions[i];
if(op.selected){
lselect.appendChild(op);
i--;
}
}
}
</script>
方法 二：
<script type="text/javascript">
sortitems = 1;
function move(fbox,tbox) {
for(var i=0; i<fbox.options.length; i++) {
if(fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
if (sortitems) SortD(tbox);
}
function BumpUp(box) {
for(var i=0; i<box.options.length; i++) {
if(box.options[i].value == "") {
for(var j=i; j<box.options.length-1; j++) {
box.options[j].value = box.options[j+1].value;
box.options[j].text = box.options[j+1].text;
}
var ln = i;break;
}
}
if(ln < box.options.length) {
box.options.length -= 1;
BumpUp(box);
}
}
function SortD(box) {
var temp_opts = new Array();
var temp = new Object();
for(var i=0; i<box.options.length; i++) {
temp_opts[i] = box.options[i];
}
for(var x=0; x<temp_opts.length-1; x++) {
for(var y=(x+1); y<temp_opts.length; y++) {
if(temp_opts[x].text > temp_opts[y].text) {
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
temp = temp_opts[x].value;
temp_opts[x].value = temp_opts[y].value;
temp_opts[y].value = temp;
}
}
}
for(var i=0; i<box.options.length; i++) {
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
}
}
</script>
</head>
<body>
<form ACTION="" METHOD="POST">
<table border="0">
<tr>
<td><select multiple size="5" name="list1">
<option value="l1">A</option>
<option value="l2">B </option>
<option value="l3">C</option>
<option value="l4">D</option>
</select></td>
<td>
<input type="button" value="向右" onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
<input type="button" value="向左" onclick="move(this.form.list2,this.form.list1)" name="B2">
</td>
<td><select multiple size="5" name="list2">
<option value="r1">E</option>
<option value="r2">F </option>
<option value="r3">G</option>
<option value="r4">H</option>
</select></td>
</tr>
</table>
</form>
</body>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
javascript 单选框，多选框美化代码
crir = { init: function() { arrLabels = document.getElementsByTagName('label'); searchLabels: for (var i=0; i<arrLabels.length; i++) { // get the input element based on the for attribute of the label tag
-
javascript实现图片跟随鼠标移动效果的方法
本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g
-
javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现. zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事件穿透的 bug,其他类型的事件也或多或少的存在一些兼容性问题. 于是乎,干脆自己动手对这些常用的手势事件进行了封装,由于没有太多真实的设备来进行测试,可能存在一些兼容性问题,下面的代码也只是在 iOS 7.Andorid 4 上的一些比较常见的浏览器中测试通过. t
-
Javascript 鼠标移动上去 滑块跟随效果代码分享
先来一张截图. 鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随.不管有多少个都可以.javascript code: 复制代码 代码如下: function changeCoord(id, left) { $$(id).style.left = left;} function $$(id) { return document.getElementById(id);} function $$$(id) { return document.getElementsByClassNam
-
基于javascript实现判断移动终端浏览器版本信息
具体解释都在注释里,这里就不多废话了,直接奉上代码 复制代码 代码如下: <script type="text/javascript"> /* * 智能机浏览器版本信息: * */ varbrowser={ versions:function(){ varu = navigator.userAgent, app = navigator.appVersion; return{//移动终端浏览器版本信息
-
JavaScript检测鼠标移动方向的方法
本文实例讲述了JavaScript检测鼠标移动方向的方法.分享给大家供大家参考.具体实现方法如下: function Start() { stage.addEventListener(MouseEvent.MOUSE_MOVE, CheckDirection); } Start(); var prevX=0; var prevY=0; var curX=0; var curY=0; var dirX:String=""; var dirY:String=""; fu
-
javascript判断移动端访问设备并解析对应CSS的方法
本文实例讲述了javascript判断移动端访问设备并解析对应CSS的方法.分享给大家供大家参考.具体分析如下: javascript判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的): 复制代码 代码如下: // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel
-
javascript实现点击按钮让DIV层弹性移动的方法
本文实例讲述了javascript实现点击按钮让DIV层弹性移动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/
-
使用javascript实现ListBox左右全选,单选,多选,全请
复制代码 代码如下: <html><head> <meta http-equiv="Content-Type " content="text/html; charset=gb2312 "> <title>list测试</title></head><body> <div style="font-size: 10pt;">
-
基于javascript实现单选及多选的向右和向左移动实例
本文实例讲述了基于javascript实现单选及多选的向右和向左移动实例.分享给大家供大家参考.具体实现方法如下: 方法 一: <body> <h1>实现单选及多选的向右和向左移动</h1> <div id="lst"> <span> <select id="lselect" size="10" multiple="multiple" style="w
-
基于JavaScript实现单选框下拉菜单添加文件效果
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript实现的,具体详情如下所示: 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个选项有不同的积分)积分的多少来给出评语 演示代码: <html> <head> <title>DHTML技术演示---radio的使用</title> <meta http-equiv="content-Type"
-
基于JavaScript实现带数据验证和复选框的表单提交
实现: 1.用户至少选中某项,即表示选中该行,同时该行的数据验证通过,表单提交:否则,不提交. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>带数据验证和复选框的表单提交</title> <script src="../commonJqery/jquery-3.0.0.js&q
-
基于JavaScript表单脚本(详解)
什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav
-
Labelauty–jQuery单选框/复选框美化插件分享
本文实例讲述了Labelauty–jQuery单选框/复选框美化插件,分享给大家供大家参考.具体如下: Labelauty–jQuery单选框/复选框美化插件,基于jQuery的一个非常小巧的插件,它除了能够实现单选框/复选框原本的选中.未选中.禁用等功能外,还能够设置选中和未选中的文本信息.标签的最小宽度等. 运行效果图:-------------------------------查看效果------------------------------------ 具体代码如下 <head>
-
基于JavaScript实现游戏购物车效果详解
目录 项目展示 登陆界面 注册界面 主界面 项目展示 登陆界面 登陆界面html和js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
-
js表单处理中单选、多选、选择框值的获取及表单的序列化
本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')
-
Asp.net自定义控件之单选、多选控件
本文实例为大家分享了Asp.net单选.复选框控件的具体实现代码,供大家参考,具体内容如下 将常用的jquery插件封装成控件也是个不错的选择. 先看看效果: 1.新建类库项目,创建数据源类 [Serializable] public class Select2Item { public bool Selected { get; set; } public string Text { get; set; } public string Value { get; set; } public Sel
-
JavaScript模拟文件拖选框样式v1.0的实例
文件拖选v1.0 图片不清楚时请右键点击"在新链接中打开图片" 实现效果 页面布局 实现思路 拖选框 css样式中设置拖选框样式,注意设置position: absolute;漂浮状态. 监听p#container的鼠标按下事件并获取起始坐标,鼠标按下时通过append()方法添加p#selectBox. 鼠标按下事件后鼠标移动事件,比较鼠标的当前位置event.pageX,event.pageY来为p#selectBox添加坐标top/left 和尺寸width/height. 鼠标
-
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> &l