使用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的最佳方法分享
Oct 21 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
Javascript节点关系实例分析
May 15 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
使用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
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
javascript 精粹笔记
2010/05/09 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Python实现的字典值比较功能示例
2018/01/08 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
党校个人自我鉴定范文
2014/03/28 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
卫生系统先进事迹
2014/05/13 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
实习护士自荐信
2015/03/25 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书