1. jsp 页面中:
<tr>
<td colspan="2" class="td_tr1">
<select name="receivers" multiple="multiple" size="10" id="receivers" style="width:300">
<%
ContentList list2 = new ContentList();
Iterator<Content> iter2 = list2.getList(request.getParameter("page"));
totalNum = list2.getTotalrow();
while (iter2.hasNext())
{
Content db = iter2.next();
System.out.println(db.getCtid());
%>
<option value='<%=db.getCtid()%>'><%=db.getTitle()%> </option>
<%} %>
</select>
</td>
<td class="td_tr1">
<input type="hidden" name="cid" value="<%=cid %>">
<input id=addInd type="button" value="增加>>" name="addInd" onClick="addChildNodes(receivers,receiver,'ddd');" >
<br><br>
<input id=removeInd type="button" value="删除<<" name="removeInd" onClick="removeChildNodes(receivers,receiver);">
</td>
<td class="td_tr1">
<select multiple name="receiver" size="10" style="width:300px ">
<%
//String sqlWhere ="where bulletinid="+ dblist.getBulletinid(); //out.println(DDListOut.getReceiverDDList1("receiver",Tools.checkNull(request.getParameter("//receiver")),true,"",sqlWhere));
%>
</select>
</td>
</tr>
2. 提交函数 javascript
function doAdd()
{
getNodes(document.all.receivers,document.all.receiver);
document.myform.action="addRelation.jsp";
myform.submit();
document.all.btnadd.disabled=true;
}
function getNodes(srcObj,desObj)
{
var strNodes="";
if(desObj.options[0].value == "")
{
var desLen=srcObj.length;
for(var i=1;i<desLen;i++)
{
//alert("i="+i);
var srcOpt=srcObj.options[i].value ;
strNodes = strNodes +","+ srcOpt ;
}
}
else if(desObj.options[0].value != "")
{
var desLen=desObj.length;
for(var i=0;i<desLen;i++)
{
var srcOpt=desObj.options[i].value ;
strNodes = strNodes +","+ srcOpt ;
}
}
alert("strNodes="+strNodes);
document.all.rece.value=strNodes.substring(1);
}
3. 推拉javascript:
//添加
function addChildNodes(srcObj,desObj,alertMessage)
{
//如果已经选择了不限,则不增添加任何项
var desLen=desObj.length;
//alert("desLen="+desLen);
//循环每个选项
var srcLen=srcObj.length;
//alert("srcLen="+srcLen);
for(var i=0;i<srcLen;i++)
{
var srcOpt=srcObj.options[i];
if(srcOpt.selected)
{
//如果已经选择了不限,则不添加任何项
// alert(srcOpt.value);
if(srcOpt.value=="")
{
clearListObj(desObj,srcObj);
//removeChildNodes(srcObj,desObj)
desObj.options.add(new Option(srcOpt.text,srcOpt.value));
//srcObj.options.remove(i);
return;
}
//如果已经选择了该项,则不再添加
var desLen=desObj.length;
var isContinue=false;
for(var j=0;j<desLen;j++)
{
//选择其他后,删除已经选择的“不限”选项
if(desObj.options[j].value=="")
{
desObj.remove(j);
//isContinue=true;
// continue;
//srcObj.options.add(new Option(desObj.options[j].text,desObj.options[j].value));
//desObj.options.add(new Option(srcOpt.text,srcOpt.value));
//srcObj.options.remove(i);
}
}
//if(isContinue==true) continue;
desObj.options.add(new Option(srcOpt.text,srcOpt.value));
srcObj.options.remove(i);
break;
}
}
}
//判断是否超过限定项数(默认为5项)
function IsSelectFlow(srcObj,selectObj)
{
var selectLen=selectObj.length;
if(selectLen>=5 && srcObj.value!=NOTLIMITID)
{
return true;
}
return false;
}
//移除
function removeChildNodes(srcObj,desObj)
{
var len=desObj.length;
for(var i=len-1;i>=0;i--)
{
if(desObj.options[i].selected)
{
if(desObj.options[i].value=="")
{
//srcObj.options.add(new Option(desObj.options[i].text,desObj.options[i].value));
desObj.remove(i);
}
else
{
srcObj.options.add(new Option(desObj.options[i].text,desObj.options[i].value));
desObj.remove(i);
}
}
}
}
//清除obj
function clearListObj(obj,obj1)
{
var len=obj.length;
for(var i=0;i<len;i++)
{
obj1.options.add(new Option(obj.options[0].text,obj.options[0].value));
obj.remove(0);
}
}
//初始化ExpectTrade
function initExpectTradeNodes(srcObj,desObj,idstr)
{
clearListObj(srcObj);
var len=__ExpectTradeIds.length;
for(var i=0;i<len;i++)
{
srcObj.options.add(new Option(__ExpectTradeNames[i],__ExpectTradeIds[i]));
}
var ids=idstr.split(',');
for(var i=0;i<ids.length;i++)
{
var isFind=false;
for(var j=0;j<len;j++)
{
if(ids[i]==srcObj.options[j].value)
{
desObj.options.add(new Option(__ExpectTradeNames[j],__ExpectTradeIds[j]));
isFind=true;
break;
}
}
}
}
//全选
function selectAll(obj)
{
var len=obj.length;
for(var i=0;i<len;i++)
{
obj.options[i].selected=true;
}
}
分享到:
相关推荐
JavaScript相册左右推拉窗是一种常见的网页交互设计,主要用于展示多张图片,用户可以通过点击或滑动来切换图片。这种效果能提供一个直观且有趣的用户体验,尤其在展示产品细节、艺术作品或者个人照片集时非常实用。...
在推拉门效果中,HTML可能会包含一个或多个容器元素,比如`<div>`,用来容纳门的左右两部分。这些元素的宽度、高度以及相对位置将被精确设置,以便在JavaScript的控制下能够平滑地移动。 接下来,JavaScript的介入...
"左右可伸缩滑动门"是一种常见的网页特效,它通过JavaScript和CSS技术实现,尤其在广告设计和界面展示中颇为流行。本教程将深入探讨如何利用JQuery、div+css技术创建这种效果。 首先,JQuery是一个广泛使用的...
2. JavaScript/jQuery:如果需要更复杂的交互,如响应用户的点击事件,或者与其他元素的交互,可以使用JavaScript或jQuery来控制推拉门的开关状态。例如,监听`click`事件,然后改变门的状态(打开或关闭)。 3. ...
12_2.htm 推拉门式样的菜单。 12_3.htm 浮动顶部的菜单。 12_4.htm 浮动底部的菜单。 12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景...
12_2.htm 推拉门式样的菜单。 12_3.htm 浮动顶部的菜单。 12_4.htm 浮动底部的菜单。 12_5.htm 渐显效果下拉菜单。 第13章(\13) 示例描述:背景特效。 13_1.htm 背景时钟。 13_2.htm 永远居中的背景...
CSS3作为层叠样式表的第三个版本,引入了许多新的选择器、布局模式以及动画和过渡效果,使得开发者无需依赖JavaScript或其他脚本语言即可实现动态视觉效果。 在这款左右滑动按钮中,主要运用了以下几个CSS3的关键...
例如,如果关注点在于图片内容的动态展开和收缩,而不需要考虑到图片左右滑动,那么使用改变图片宽度的方法可能更加简单有效;如果希望用户界面更富有动感,产生类似拖拽图片的视觉效果,那么使用改变图片偏移值的...
本项目是基于网络资源,利用jQuery这一强大的JavaScript库,对一个现有的jQuery插件进行了改造,以实现更多样化的图片轮播功能。 jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画...
通常,我们会为一个包含两个子元素的容器设置固定宽度,这两个子元素分别代表元素的左右两部分。通过调整子元素的宽度和隐藏超出部分,可以实现滑动的效果。 例如,我们有一个导航菜单,它由一个左侧的箭头和一个...
3. `34.js`: 这可能是JavaScript脚本文件,负责处理游戏逻辑,如玩家移动、箱子推拉检测、游戏胜利条件判断等。 HTML和CSS的组合使得我们可以创建出具有视觉吸引力的界面,而JavaScript则赋予了游戏交互性和动态性...
在本篇中,我们将深入探讨Bootstrap表格的实现、特性以及如何实现排序、推拉效果和分页功能。 首先,Bootstrap表格的基本结构是通过HTML的`<table>`元素来创建的,同时使用Bootstrap的CSS类来应用样式。例如: ```...
接着,"滑动"是触摸手势的一种常见形式,它允许用户通过在屏幕上左右滑动来浏览多个页面或元素。在banner切换效果中,滑动手势可以使用户平滑地从一个广告跳转到下一个,无需等待自动轮播或者点击导航箭头。 再来...
- 还包括其他如随机、旋转、推拉等创新特效,让网页更具动感。 2. **自定义参数**: - 自动播放:可以设置轮播是否自动进行,以及间隔时间。 - 导航按钮:是否显示左右切换按钮,以及按钮样式。 - 缩略图导航:...
哇滑动器提供了多种预设的动画样式,包括淡入淡出、左右滑动、上下滑动、旋转、推拉等多种效果,每种效果都可以自定义速度,使得轮播的节奏感可以按照个人喜好调整。此外,还可以设置轮播的自动播放功能,以及是否...
接下来,jQuery作为一个强大的JavaScript库,提供了便利的DOM操作和事件处理功能,它可以帮助我们更轻松地控制动画的触发和执行。使用jQuery的`.animate()`方法,我们可以自定义更复杂的动画效果,包括非线性的运动...
4. **多变效果**:幻灯片不仅限于简单的左右滑动,还可以有淡入淡出、推拉、缩放等多种过渡效果。这些效果可以通过改变元素的透明度、大小、位置等属性,结合jQuery的动画函数来实现。 5. **解说功能**:幻灯片带...