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


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对象[0]是什么含义?
Jul 31 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
通过上下左右键和回车键切换光标实现代码
Mar 08 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
在Layui中实现开关按钮的效果实例
Sep 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新手谈谈我的学习心得
2007/02/25 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
js仿360开机效果
2019/12/26 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
如何查找网页漏洞
2016/06/22 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
幼儿园招生广告
2014/03/19 职场文书
个人培训自我鉴定
2014/03/28 职场文书
销售合作意向书范本
2015/05/08 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
导游词之清晏园
2019/11/22 职场文书
python实现监听键盘
2021/04/26 Python
Vue和Flask通信的实现
2021/05/19 Vue.js
关于MySQL中的 like操作符详情
2021/11/17 MySQL
pandas中关于apply+lambda的应用
2022/02/28 Python