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


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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 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
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
javascript表单验证大全
2015/08/12 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
如何写出好的Java代码
2014/04/25 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
大学生思想汇报范文
2013/12/31 职场文书
五年级英语教学反思
2014/01/31 职场文书
年终总结会主持词
2014/03/25 职场文书
建筑投标担保书
2014/05/20 职场文书
教室标语大全
2014/06/21 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
python 使用pandas读取csv文件的方法
2022/12/24 Python