手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >多选列表框动态添加,移动,删除,全选等操作的简单实例
多选列表框动态添加,移动,删除,全选等操作的简单实例
摘要:复制代码代码如下:UntitledDocument.bgsubleft{BACKGROUND-POSITION:centerbottom;B...

复制代码 代码如下:

<%

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">

<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"><br>

<input name="add" type="button" id="add" value="Add all"><br>

<input name="add" type="button" id="add" value="Remove"><br>

<input name="add" type="button" id="add" value="Remove all">

<input name="add" type="button" id="add" value="Select all"></td>

<td><select name="objectList" size="10" multiple id="objectList">

<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"></td>

<td></td>

</tr>

</table>

</form>

</body>

</html>

【多选列表框动态添加,移动,删除,全选等操作的简单实例】相关文章:

基于JavaScript实现动态添加删除表格的行

Javascript获取统一管理的提示语(message)

Jquery动态添加输入框的方法

javascript实现dom动态创建省市纵向列表菜单的方法

JS动态增删表格行的方法

Javascript动态创建表格及删除行列的方法

jQuery实现自动滚动到页面顶端的方法

列表内容的选择

jQuery切换所有复选框选中状态的方法

JQuery实现动态添加删除评论的方法

精品推荐
分类导航