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


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 二维数组
Nov 26 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jquery中键盘事件小结
Feb 24 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
js实现随机数小游戏
Jun 28 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 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 array_intersect()函数使用代码
2009/01/14 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
angular动态表单制作
2018/02/23 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
微信小程序开发实现消息推送
2020/11/18 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
Python全局变量操作详解
2015/04/14 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
python实现简易通讯录修改版
2018/03/13 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
节约每一滴水演讲稿
2014/09/09 职场文书
单位同意报考证明
2015/06/17 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
浅谈Web Storage API的使用
2021/06/23 Javascript
java项目构建Gradle的使用教程
2022/03/24 Java/Android
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS