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


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 跳转代码集合
Dec 03 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JS实现盒子拖拽效果
Feb 06 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生成文件
2007/01/15 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
js实现消息滚动效果
2017/01/18 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
python开发之函数定义实例分析
2015/11/12 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
商务专员岗位职责
2013/11/23 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
旅游活动总结
2014/08/27 职场文书
超市创业计划书
2014/09/15 职场文书
毕业证委托书范文
2014/09/26 职场文书
2014年财政工作总结
2014/12/10 职场文书
给医院的感谢信
2015/01/21 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL