使用jQuery实现dropdownlist的联动效果(sharepoint 2007)


Posted in Javascript onMarch 30, 2011

使用场景,比如,选中某个省份,然后下级列表中会显示对应的城市。

1.使用Jquery-1.4.2.js和jquery.SPServices-0.5.7.js。

2.创建主表和子表,建立对应关系。

3.在List的NewItem或者EditItem page中添加Content Editor Webpart,然后在其中添加脚本代码。

4.实现,

dropdownObj控件:

使用jQuery实现dropdownlist的联动效果(sharepoint 2007)

cascadeDropdownObj控件(该控件是通过脚本附加的):

使用jQuery实现dropdownlist的联动效果(sharepoint 2007)

该方法是通过传入参数,来返回对于字表的记录

function GetSubDropdown(parameterVal){ 
cascadeDropdownObj.empty();//对下级列表进行清空初始 
cascadeDropdownObj.append("<option selected='selected'>(None)</option>");//添加一个(None)值 
var camlQuery = "<Query xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \ 
<Where> \ 
<Eq> \ 
<FieldRef Name='Title' /> \ 
<Value Type='Text'>"+parameterVal+"</Value> \ 
</Eq> \ 
</Where> \ 
</Query>"; 
$().SPServices({ 
operation: "GetListItems", 
async: false, 
listName: "CascadeSub", 
CAMLQuery: camlQuery, 
completefunc: function (xData, Status) { 
$(xData.responseXML).find("[nodeName=z:row]").each(function() { 
var subDropdownVal = $(this).attr("ows_SubDropdownVal");//获取字表对应的值 
//binding subDropdown 
cascadeDropdownObj.append("<option>"+subDropdownVal+"</option>"); 
}); 
} 
}); 
} 
//cascading 'Dropdown' 
dropdownObj.change(function(){ 
var dropdownSelectTextObj = $("select[title$='Dropdown'] option:selected");//获取当前选中值 
switch(dropdownSelectTextObj.text()){ 
case "L1": 
GetSubDropdown("L1"); 
break; 
case "L2": 
GetSubDropdown("L2"); 
break; 
case "PL1": 
GetSubDropdown("PL1"); 
break; 
default: //表示选中(None)值之后,对下级列表进行清空初始 
cascadeDropdownObj.empty(); 
cascadeDropdownObj.append("<option selected='selected'>(None)</option>"); 
break; 
} 
});
Javascript 相关文章推荐
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
Vue.use源码分析
Apr 22 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
使用jquery为table动态添加行的实现代码
Mar 30 #Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 #Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 #Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 #Javascript
使用隐藏的new来创建对象
Mar 29 #Javascript
myeclipse安装jQuery插件的方法
Mar 29 #Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 #Javascript
You might like
神族 Protoss 历史背景
2020/03/14 星际争霸
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Django实现内容缓存实例方法
2020/06/30 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
四种会话跟踪技术
2015/05/20 面试题
20年同学聚会感言
2014/02/03 职场文书
先进单位申报材料
2014/12/25 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
如何写辞职信
2015/05/13 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书