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


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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
js进行表单验证实例分析
Feb 10 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
深入解析JavaScript中函数的Currying柯里化
Mar 19 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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获取文件后缀名的三个函数
2012/10/15 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
js格式化时间小结
2014/11/03 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
keras得到每层的系数方式
2020/06/15 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
导游的职业规划书范文
2013/12/27 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
员工保密协议书
2014/09/27 职场文书
实训报告范文大全
2014/11/04 职场文书
车间质检员岗位职责
2015/04/08 职场文书
旷工检讨书大全
2015/08/15 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android