多选列表框动态添加,移动,删除,全选等操作的简单实例-js教程-PHP中文网

首页

web前端

js教程

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

PHPz

May 16, 2016 pm 05:04 PM

列表框删除添加移动

本篇文章主要是对多选列表框动态添加,移动,删除，全选等操作的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助。

<%
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(&#39;a&#39;)" style="width:100"><br>
    <input name="add" type="button" id="add" value="Remove all" onclick="removeAllList(&#39;a&#39;)" 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视频教程！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7564

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

inetpub文件夹可以删除吗？快速删除C盘inetpub文件夹的方法 Mar 13, 2024 pm 02:00 PM

　　电脑C盘发现有个inetpub文件夹占用极大的内存，这个inetpub是什么文件夹？可以直接删除吗？其实inetpub是IIS服务端的一个文件夹，IIS全称InternetInformationServices，也就互联网信息服务，是可以搭建网站、调试网站用的，如果不需要的话，可以将其卸载掉。　　具体方法如下：　　1、右键点击开始菜单，选择“程序和功能”。　　2、打开后点击“启用或关闭Windows功能”。　　3、在Windows功能列表中，取消勾选II

小红书笔记怎么删除 Mar 21, 2024 pm 08:12 PM

小红书笔记怎么删除?在小红书APP中是可以编辑笔记的，多数的用户不知道小红书笔记如何的删除，接下来就是小编为用户带来的小红书笔记删除方法图文教程，感兴趣的用户快来一起看看吧！小红书使用教程小红书笔记怎么删除1、首先打开小红书APP进入到主页面，选择右下角【我】进入到专区;2、之后在我的专区，点击下图所示的笔记页面，选择要删除的笔记;3、进入到笔记页面，右上角【三个点】;4、最后下方会展开功能栏，点击【删除】即可完成。

微信拉黑再删除永久加不上是真的吗 Apr 08, 2024 am 11:41 AM

1、首先，拉黑再删除永久加不上是假的，拉黑删除后想要再加对方，只要对方同意即可。2、如果用户将某人拉黑，对方将无法向用户发送消息、查看用户的朋友圈以及与用户进行通话。3、拉黑并不意味着将对方从用户的微信联系人列表中删除。4、如果用户在拉黑后又将对方从用户的微信联系人列表中删除，那么在删除后是没有办法恢复的。5、如果用户想再次添加对方为好友，需要对方同意并重新添加用户。

found.000是什么文件夹？found.000文件夹可以删除吗？ Mar 13, 2024 pm 08:52 PM

　　日常使用电脑的过程中，可能会收到found.000文件丢失损坏的错误提示，这个found.000是什么文件夹？如果没有用的话，可以将其删除吗？既然有这么多人不认识这个文件，下面小编就来跟大家仔细说说found.000文件夹吧~　　一、found.000是什么文件夹　　当电脑出现因非法关机导致的文件部分或全部丢失时，可以在位于系统分区中指定目录下找到名为“found.000”的特殊文件夹及其内部包含的以“.chk”为扩展名的文件。　　这个“fo

小红书发布怎么删除？发布删除怎么恢复？ Mar 21, 2024 pm 05:10 PM

小红书作为一家流行的社交电商平台，吸引了大量用户分享生活点滴和购物心得。有时候我们可能会不经意发布一些不合适的内容，这时候需要及时删除，这样可以更好地维护个人形象或者遵守平台规定。一、小红书发布怎么删除？1.登录小红书账号，进入个人主页。2.在个人主页下方，找到“我的创作”选项，点击进入。3.在“我的创作”页面，你可以看到所有发布的内容，包括笔记、视频等。4.找到需要删除的内容，点击右侧的“...”按钮。5.在弹出的菜单中，选择“删除”选项。6.确认删除后，该条内容将从你的个人主页和公共页面消失

米家怎么添加电视 Mar 25, 2024 pm 05:00 PM

很多用户们在现代生活中越来越青睐小米智能家居互联的电子生态，那么连接米家APP后，你就可以轻松用手机来控制连接设备，但是很多用户们还不知如何将自己的家居添加米家app中，那么这篇教程攻略就将为大家带来具体连接方法步骤攻略，希望能帮助到各位有需要的小伙伴们。1、下载米家APP后，创建或者登录小米账户。2、添加方法：当全新的设备通电后，将手机靠近设备并打开小米电视，正常情况下会弹出连接提示，选择“确定”即进入设备连接流程。若无提示弹出，也可以手动添加设备，方法是：进入智能家庭APP后，点击左下方第1

hiberfil.sys是什么文件？hiberfil.sys可以删除吗？ Mar 15, 2024 am 09:49 AM

　　最近有很多网友问小编，hiberfil.sys是什么文件？hiberfil.sys占用了大量的C盘空间可以删除吗？小编可以告诉大家hiberfil.sys文件是可以删除的。下面就来看看详细的内容。hiberfil.sys是Windows系统中的一个隐藏文件，也是系统休眠文件。通常存储在C盘根目录下，其大小与系统安装内存大小相当。这个文件在计算机休眠时被使用，其中包含了当前系统的内存数据，以便在恢复时快速恢复到之前的状态。由于其大小与内存容量相等，因此它可能会占用较大的硬盘空间。　　hiber

抖音聊天记录怎么彻底消除干净 May 07, 2024 am 11:14 AM

1、打开抖音app，点击界面底部的【消息】，点击需要删除的聊天对话入口。2、长按任意一条聊天记录，点击【多选】，勾选想要删除的聊天记录。3、点击右下角的【删除】按钮，在弹出的窗口中选择【确认删除】即可将这些记录永久删除。

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题