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


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 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
canvas绘制的直线动画
Jan 23 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
为什么node.js不适合大型项目
Apr 28 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 SQL之where语句生成器
2009/03/24 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
php-fpm配置详解
2014/02/12 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
python抓取网页中的图片示例
2014/02/28 Python
Python基于DES算法加密解密实例
2015/06/03 Python
python实现的希尔排序算法实例
2015/07/01 Python
python实现井字棋游戏
2020/03/30 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
python3中数组逆序输出方法
2020/12/01 Python
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
药剂专业个人求职信范文
2014/04/29 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
学历证明样本
2015/06/16 职场文书
公司员工奖惩制度
2015/08/04 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书
Python实现信息管理系统
2022/06/05 Python