多选列表框动态添加,移动,删除,全选等操作的简单实例


Posted in Javascript onJanuary 13, 2014
<%
dim a
a = split(Request.Form("sourceList"),",")
Response.Write "Source:" & Request.Form("sourceList") & ubound(a) & "<br>Object:" & Request.Form("objectList") & "<br>"
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Untitled Document</title>
<STYLE type=text/css>
.bgsubleft {
BACKGROUND-POSITION: center bottom; BACKGROUND-IMAGE: url(images/bgleft.gif); BACKGROUND-REPEAT: repeat-x
}
.bgsubleftn {
BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(images/bgleftn.gif); BACKGROUND-REPEAT: no-repeat
}
</STYLE>
<script language="JavaScript" type="text/JavaScript">
function addSelectedList()
{
var objSource = form1.sourceList;
var objObject = form1.objectList;
var sourcelen = objSource.length ;
for(var i=0;i<sourcelen;i++){
    if (objSource.options[i].selected){
      if (!checkExist(objObject,objSource.options[i].value)){
        addtolist(objObject,objSource.options[i].text,objSource.options[i].value);
      }
    }
}
}
function addAllList()
{
var objSource = form1.sourceList;
var objObject = form1.objectList;
var sourcelen = objSource.length ;
for(var i=0;i<sourcelen;i++){
    if (!checkExist(objObject,objSource.options[i].value)){
      addtolist(objObject,objSource.options[i].text,objSource.options[i].value);
    }
}
}
function removeSelectedList(noRemoveValue)
{
var objObject = form1.objectList;
for (var i=0;i<objObject.length;i++){
    if (objObject.options[i].selected && objObject.options[i].value != noRemoveValue)
    {
      objObject.options.remove(i);
      removeList(noRemoveValue);break;
    }
}
}
function removeAllList(noRemoveValue)
{
var objObject = form1.objectList;
var objLen = objObject.length;
for (var i=0;i<objLen;i++){
    if ( objObject.options[i].value != noRemoveValue){
      objObject.options.remove(i);
      removeAllList(noRemoveValue);break;
    }
}
}
function selectedAll(obj)
{
for (var i=0;i<obj.length;i++){
    obj.options[i].selected = true;
}
}
function checkExist(obj,value)
{
var isExist = false;
for (var i=0;i<obj.length;i++){
    if (obj.options[i].value == value){
      isExist = true;
      break;
    }
}
return isExist;
}
function addtolist(obj,value,label){
obj.add(new Option(value,label));
}
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="form1" action="temp.asp" method="post">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td><select name="sourceList" size="10" multiple id="sourceList" style="width:150">
      <option value="a">1</option>
      <option value="b">2</option>
      <option value="c">3</option>
      <%
      for i = 6 to 20
        Response.Write("<option value=""" & i+200 & """>" & i+200 & "</option>" & vbcrlf)
      Next
      %>
    </select></td>
    <td><input name="add" type="button" id="add" value="Add" onclick="addSelectedList()" style="width:100"><br>
      <input name="add" type="button" id="add" value="Add all" onclick="addAllList()" style="width:100"><br>   
    <input name="add" type="button" id="add" value="Remove" onclick="removeSelectedList('a')" style="width:100"><br>
    <input name="add" type="button" id="add" value="Remove all" onclick="removeAllList('a')" style="width:100">
    <input name="add" type="button" id="add" value="Select all" onclick="selectedAll(form1.objectList)" style="width:100"></td>
    <td><select name="objectList" size="10" multiple id="objectList" style="width:150">
      <option value="a">1</option>
      <option value="d">4</option>
      <option value="e">5</option>
      <%
      for i = 6 to 20
        Response.Write("<option value=""" & i & """>" & i & "</option>" & vbcrlf)
      Next
      %>
    </select></td>
</tr>
<tr>
    <td></td>
    <td><input name="subm" type="submit" value="Submit" style="width:100"></td>
    <td> </td>
</tr>
</table>
</form>
</body>
</html>
Javascript 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 #Javascript
js导航栏单击事件背景变换示例代码
Jan 13 #Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 #Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 #Javascript
parentElement,srcElement的使用小结
Jan 13 #Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 #Javascript
JS 日期比较大小的简单实例
Jan 13 #Javascript
You might like
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
如何在PHP中读写文件
2020/09/07 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
python flask实现分页效果
2017/06/27 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python的log日志功能及设置方法
2019/07/11 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
法制宣传口号
2014/06/16 职场文书
党员活动总结
2015/02/04 职场文书
公司酒会主持词
2015/07/02 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python