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


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编写widget的一些技巧分享
Oct 28 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
js实现拖拽效果
Feb 12 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 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模板技术[转]
2007/01/04 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
php与js的区别是什么
2013/08/05 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python入门篇之面向对象
2014/10/20 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
小学教师岗位职责
2013/11/25 职场文书
家长会邀请书
2014/01/25 职场文书
大学军训感言800字
2014/02/27 职场文书
工程质量承诺书范文
2014/03/27 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS