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


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中链式调用之研习
Apr 07 Javascript
jquery插件validate验证的小例子
May 08 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
鼠标经过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
我的论坛源代码(一)
2006/10/09 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
纯php生成随机密码
2015/10/30 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python使用marshal模块序列化实例
2014/09/25 Python
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python中sleep函数用法实例分析
2015/04/29 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
小小的船教学反思
2014/02/21 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL