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


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 hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
浅谈jquery回调函数callback的使用
Jan 30 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
React配置子路由的实现
Jun 03 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+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
Yii分页用法实例详解
2014/12/04 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
js格式化时间的方法
2015/12/18 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
完善的jquery处理机制
2016/02/21 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
在Layui中实现开关按钮的效果实例
2019/09/29 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
华为C++笔试题
2014/08/05 面试题
《有趣的发现》教学反思
2014/04/15 职场文书
个人党性锻炼总结
2015/03/05 职场文书
汉字听写大会观后感
2015/06/12 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS