使用JQuery实现级联Dropdownbox

本文档记录了如何在SharePoint Foundation 2010中利用jQuery创建级联Dropdownbox的过程。作者首先创建了两个列表,Countries(父列表)和Cities(子列表),然后在Document List模板的MyShowList中创建了Country和City列。通过SharePoint Designer自定义NewForm,插入特定的jQuery代码块,实现了级联效果。
摘要由CSDN通过智能技术生成

dropdownbox有人称他为option,大概就是一个意思,这里主要参考文档(需要翻墙)Cascading Drop Down Sharepoint Foundation 2010,哈哈,这里还是翻译,记录学习过程和遇到的问题。
开发环境:在本地电脑Window7搭建的开发环境。

  1. 创建两个list,命名为Countries和Cities,Countries是父列表,Cities是子列表,Countries Countries的列表图
    CitiesCities的列表图
    这里Cities列表中的Country的类型可以是line of text也可以是look up类型(查阅项类型),这里使用了line of Text类型。(图片不清晰,可以保存下在看)
  2. 创建展示的list,这里的list我选择了Doucument list类型为模板。命名为MyShowList.在List Setting中Create Column选项中创建Country和和City两个City
  3. CityColumn创建完成Country列的创建方式和City是一样的。Country的
  4. 从Site Action中打开Sharepoint Designer.打开MyShowList.这里写图片描述,自定义一个新的NewForm并将其作为默认的新建表单。打开该文件,找到
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

在该行代码下放入如下代码块

<script language="javascript" type="text/javascript" src="/address to document library/jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript" src="/address to document library/jquery.SPServices-0.0.6.min.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Cities",//包含父和子的列表
   relationshipListParentColumn: "Country",// Cities列表中的父
   relationshipListChildColumn: "Title",// Cities列表中的子
   parentColumn: "Country",展示列表中的父
   childColumn: "City",展示列表中的子
   debug: true
  });

 });
</script>

运行就可以显示级联的Dropdownlist了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值