基于javascript实现listbox左右移动
本文实例讲解了javascript实现listbox左右移动的详细代码，分享给大家供大家参考，具体内容如下
效果图：
具体代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>listbox左右移动</title>
</head>
<body>
<div style="background-color:#CCC; width:450px; height:300px; margin:150px,0,0,450px; border:1px solid">
<table align="center" width="285" height="169" bgcolor="#99CCFF">
<tr>
<td width="100">
<select name="first" id="first" size="10" multiple="multiple" style="background-color:#3FC;">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="85" valign="middle">
<input name="add" id="add" type="button" value="--->"/>
<input name="add_all" id="add_all" type="button" value="===>"/>
<input name="remove" id="remove" type="button" value="<---"/>
<input name="remove_all" id="remove_all" type="button" value="<==="/>
</td>
<td width="100" align="left">
<select name="second" id="second" size="10" multiple="multiple" style="background-color:#3FC;">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
//左移右
/*<input name="add" id="add" type="button" value="--->"/>*/
document.getElementById("add").onclick = function add()
{
var firstSel = document.getElementById("first");
var option = firstSel.getElementsByTagName("option");
//javascript的数组是动态数组，长度是可以变的。
//所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg
var oplength=option.length;
var secondSel = document.getElementById("second");
for(i=0;i<oplength;i++)
{
/*
selectedIndex: 该下标返回下拉列表的索引值
注： 如果有多个被选中的情况下，永远返回第一个选中的索引值，索引最小的那个
如果没有被选中的情况下，返回-1
selectedIndex是<select>的属性
*/
if(firstSel.selectedIndex!=-1)
{
secondSel.appendChild(option[firstSel.selectedIndex]);
}
}
}
/*<input name="add_all" id="add_all" type="button" value="===>"/>*/
document.getElementById("add_all").onclick = function addAll()
{
var firstSel = document.getElementById("first");
var option = firstSel.getElementsByTagName("option");
//javascript的数组是动态数组，长度是可以变的。
//所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg
var oplength=option.length;
var secondSel = document.getElementById("second");
for(i=0;i<oplength;i++)
{
/*因为javascript的数组是动态数组，长度是可以变的。所以当移走全部把数
组的值移走（一个一个的移走，数组长度马上-1，所以数组下标也是-1.因次我们要把每次移的是走下标为0的那个
数，这样才保证可以全部移走）*/
secondSel.appendChild(option[0]);
}
}
/*双击后把option移到右边*/
document.getElementById("first").ondblclick = function dblclick()
{
/*方法一*/
/*
var firstSel = document.getElementById("first");
var option = firstSel.getElementsByTagName("option");
//javascript的数组是动态数组，长度是可以变的。
//所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg
var oplength=option.length;
var secondSel = document.getElementById("second");
for(i=0;i<oplength;i++)
{
//双击可以看成：第一次点击选中，第二次点击移动
secondSel.appendChild(option[firstSel.selectedIndex]);
}
*/
/*方法二*/
/*
this: this表示document.getElementById("first") 下拉列表
this.selectedIndex表示下拉列表选中的项
*/
var secondSel = document.getElementById("second");
secondSel.appendChild(this[this.selectedIndex]);
}
//右移左
/*<input name="remove" id="remove" type="button" value="<---"/>*/
document.getElementById("remove").onclick = function remove()
{
var secondSel = document.getElementById("second");
var firstSel = document.getElementById("first");
var option = secondSel.getElementsByTagName("option");
//javascript的数组是动态数组，长度是可以变的。
//所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg
var oplength=option.length;
for(i=0;i<oplength;i++)
{
/*
selectedIndex: 该下标返回下拉列表的索引值
注： 如果有多个被选中的情况下，永远返回第一个选中的索引值，索引最小的那个
如果没有被选中的情况下，返回-1
selectedIndex是<select>的属性
*/
if(secondSel.selectedIndex!=-1)
{
firstSel.appendChild(option[secondSel.selectedIndex]);
}
}
}
/*<input name="remove_all" id="remove_all" type="button" value="<==="/>*/
document.getElementById("remove_all").onclick = function remove_all()
{
var secondSel = document.getElementById("second");
var firstSel = document.getElementById("first");
var option = secondSel.getElementsByTagName("option");
//javascript的数组是动态数组，长度是可以变的。
//所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg
var oplength=option.length;
for(i=0;i<oplength;i++)
{
/*因为javascript的数组是动态数组，长度是可以变的。所以当移走全部把数
组的值移走（一个一个的移走，数组长度马上-1，所以数组下标也是-1.因次我们要把每次移的是走下标为0的那个
数，这样才保证可以全部移走）*/
firstSel.appendChild(option[0]);
}
}
/*双击后把option移到右边*/
document.getElementById("second").ondblclick = function dblclick()
{
/*方法一*/
/*
var secondSel = document.getElementById("second");
var firstSel = document.getElementById("first");
var option = secondSel.getElementsByTagName("option");
//javascript的数组是动态数组，长度是可以变的。
//所以先取得下拉列表的长度，避免option被移走后长度变小，导致后面循环终止，出现beg
var oplength=option.length;
for(i=0;i<oplength;i++)
{
//双击可以看成：第一次点击选中，第二次点击移动
firstSel.appendChild(option[secondSel.selectedIndex]);
}
*/
/*方法二*/
/*
this: this表示document.getElementById("second") 下拉列表
this.selectedIndex表示下拉列表选中的项
*/
var firstSel = document.getElementById("first");
firstSel.appendChild(this[this.selectedIndex]);
}
</script>
</html>
代码注释很详细，希望可以帮到大家。
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
相关推荐
-
JavaScript控制两个列表框listbox左右交换数据的方法
本文实例讲述了JavaScript控制两个列表框listbox左右交换数据的方法.分享给大家供大家参考.具体分析如下: 这个功能我们经常用到,将左边列表框的元素移动到右边,或者将右边列表框的元素移动到左边,可以一次性全部移动 复制代码 代码如下: function listbox_moveacross(sourceID, destID) { var src = document.getElementById(sourceID); var dest = document.getEl
-
JS ListBox的简单功能实现代码
页面效果如下:代码也贴出来跟大家分享: 美元/英镑 美元/港币 美元/新加坡元 美元/日元 美元/加拿大元 美元/欧元 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
js 获取Listbox选择的值的代码
复制代码 代码如下: <script type="text/javascript"> function GetValue() { var strlist = document.getElementById("ListBox1");//获取Listbox var str= ""; //遍历Listbox,取得选中项的值 if (strlist.options.length > 0) { for (var i = 0; i <
-
用JavaScript实现类似于ListBox功能示例代码
JavaScript对于多项数据的请求和处理过程中,如何实现常常困扰很多程序员,如何进行动态编辑和删除而不影响其他的数据项,今天介绍一种方法,可供借鉴,例如通过XmlRequest请求到如下数据: 复制代码 代码如下: <span style="font-size:14px;">{ "Table": [ { "Id": 3, "Type": "X", "Content": &
-
使用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列表框listbox全选和反选的实现方法
本文实例讲述了JavaScript列表框listbox全选和反选的实现方法.分享给大家供大家参考.具体分析如下: 通过JS代码对列表框进行全选和反选是经常要操作的,非常具有实用价值. function listboxSelectDeselect(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) {
-
javascript实现listbox左右移动实现代码
1. html部分: 复制代码 代码如下: <table cellSpacing="0" borderColorDark="#ffffff" cellPadding="3" width="460" align="left" borderColorLight="#000000" border="1"> <tr bgColor="#cccccc
-
JavaScript控制listbox列表框的项目上下移动的方法
本文实例讲述了JavaScript控制listbox列表框的项目上下移动的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以控制listbox内的元素向上或者向下移动,这个功能非常有用.下面是详细的代码 复制代码 代码如下: function listbox_move(listID, direction) { var listbox = document.getElementById(listID); var selIndex = listbox.selectedInd
-
JavaScript如何从listbox里同时删除多个项目
要从列表框同时删除多个项目,我们不能从上到下的删除,因为上面的项目每删除一个,下面的项目的索引号就会变化,所以只能从下向上删除,这样就不会出现索引号乱变的问题了. html代码 复制代码 代码如下: <table> <tr> <td align="center"> <select id="lsbox" name="lsbox" size="10" multiple> <op
-
基于javascript实现listbox左右移动
本文实例讲解了javascript实现listbox左右移动的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>listbox左右移动</title> </head> <body> &
-
基于JavaScript实现表单密码的隐藏和显示出来
为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢? 当用户输入时密码显示为圆点或者星号, 为了确保用户输入的正确, 用户可以点击让密码显示的按钮. 直接就先看节目效果. 界面结构, 一个外层的pass-box, 然后内层加入input 和 一个 i 标签, 且给他们加入相应的class名称. <div class="pass-box"> <input type=&qu
-
基于JavaScript表单脚本(详解)
什么是表单? 一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域:包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等. 表单按钮:包括提交按钮.复位按钮和一般按钮:用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作. JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和jav
-
基于JavaScript实现动态创建表格和增加表格行数
在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能.对此感兴趣的朋友可以参考一下代码: js代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </head>
-
基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）
表单序列化类型的数据是指url传递的数据的格式,形如"key=value&key=value&key=value"这样的key/value的键值对.一般来说使用jQuery的$.fn.serialize函数能达到这样的效果.如何将这样的格式转化为对象? 我们知道使用jQuery的$.fn.serializeArray函数得到的是一个如下结构的对象 [ { name: "startTime" value: "2015-12-02 00:00:
-
基于JavaScript实现跳转提示页面
先给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 网页布局 <p>操作成功</p> <strong>5</strong><span>秒后回到主页</span><a href="javascript:history.back();">返回</a> 任务: 1.打开网页后,如果不做任何操作则返回到一个新的页面 var num=document.getElementsByTagName(
-
基于JavaScript实现评论框展开和隐藏功能
1.效果图如下所示, 点击评论会在对应的评论区域展开评论输入框,点击取消会取消对应的评论输入框 2.html代码:需要引入jQuery.js <div class="nr-comment"> <div class="nr-comment-con"> <div class="nr-comment-nav"> <div class="comment-number"> <span
-
基于JavaScript实现根据手机定位获取当前具体位置（X省X市X县X街道X号）
废话不多说了,直接给大家贴js代码了.具体代码如下所示: function Location(){}; Location.prototype.getLocation = function(callback){ var options = { enableHighAccuracy: true, maximumAge: 1000 }; this.callback = Object.prototype.toString.call(callback) =="[object Function]"
-
基于javascript实现窗口抖动效果
本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 鼠标点击,窗口实现抖动. 具体代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"/> <title>窗口登陆效果</title> <style type="text/css"> #win { position:r
-
基于JavaScript实现简单的随机抽奖小程序
对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做.本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效