在上一篇文章SPServices介绍之三中介绍了使用SPServices调用SharePoint Web Service的基本方法，这篇文章利用SPCascadeDropdowns方法实现下拉菜单的级联选择功能（联动功能）。
假设需要实现 国家->公司->产品 这样一个两级的级联关系，例如中国->联想公司->Thinkpad。首先需要有三张表，分别是国家Country, 公司Company和产品Product，结构分别如下所示。
Country列表，Title列是Country的名字；
Company列表，其中的Title是Company的名字，Country Name是一个lookup列，lookup到Country列表的Title：
Product列表，其中Title是product名字，Company是lookup到Country的Title，Company Name是lookup到Company的Title：
再建立一个需要使用级联关系的表，例如公司购买清单，需要注明在哪个国家的哪个公司购买了哪个产品，结构是：
当用户添加一条item的时候是这样的：
当Company的数据很多时，非常不方便。
现在实现Country, Company和Product的级联关系，比如当我选择China的时候，From Company的下拉菜单只显示中国的公司。当在From Company的下拉菜单中选择了Lenovo的时候，Product下拉菜单中只显示联想的产品。
只需要通过以下两个步骤就可以完成：
1. 在newform中引入JQuery和SPServices
使用SharePoint designer打开Information列表的newform，将下面的代码添加到“PlaceHolderAdditionalPageHead”这个pleaceholder中去：
- <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
- <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js" type="text/javascript"></script>
2. 然后在其后添加以下代码：
- <script type="text/javascript">
- $(document).ready(function() {
- $().SPServices.SPCascadeDropdowns({
- relationshipList: "Company",
- relationshipListParentColumn: "Country_x0020_Name",
- relationshipListChildColumn: "Title",
- parentColumn: "From Country",
- childColumn: "From Company",
- debug: true
- });
- $().SPServices.SPCascadeDropdowns({
- relationshipList: "Product",
- relationshipListParentColumn: "Company_x0020_Name",
- relationshipListChildColumn: "Title",
- relationshipListSortColumn: "ID",
- parentColumn: "From Company",
- childColumn: "Product"
- });
- });
- </script>
代码分为两个部分，其中的第一部分代码是：
- $().SPServices.SPCascadeDropdowns({
- relationshipList: "Company",
- relationshipListParentColumn: "Country_x0020_Name",
- relationshipListChildColumn: "Title",
- <span style="white-space:pre"> </span> relationshipListSortColumn: "ID",
- parentColumn: "From Country",
- childColumn: "From Company",
- debug: true
- });
这段代码建立了From Country和From Company列的级联关系。首先通过parentColumn和childColumn指定了Information列表中需要级联的列“From Country”和“From Company”
- parentColumn: "From Country",<pre name="code" class="javascript"><span style="font-family: Arial, Helvetica, sans-serif;">childColumn: "From Company"</span>
- relationshipList： "Company"
即当From Country这个父列的值改变时，到”Company“列表中读取数据。根据Company表中的数据，我们需要将Lenovo和Huawei取出来，如何读取由relationshipListParentColumn和relationshipListChildColumn这两个参数来指定：
- relationshipListParentColumn: "Country_x0200_Name",
- relationshipListChildColumn: "Title"
第二部分代码是：
- $().SPServices.SPCascadeDropdowns({
- relationshipList: "Product",
- relationshipListParentColumn: "Company_x0020_Name",
- relationshipListChildColumn: "Title",
- relationshipListSortColumn: "ID",
- parentColumn: "From Company",
- childColumn: "Product"
- });
这段代码建立了From Company和Product列的级联关系。与第一段代码是类似的，这里就不再解释了。
修改完毕之后到Information列表中添加一个item，可以看到，当我选择China的时候，From Company列只列出了中国的公司；当我选择Lenovo的时候，Product下拉菜单中只有Thinkpad和Yoga：
SPCascadedDropDowns方法还提供了其他的参数，使级联的功能更加强大，例如可以排序，跨站点级联，还可以使用CAML查询，还支持支持多值和回调等等，以下是SPCascadedDropDowns的语法，详细介绍请查看官方文档：点击打开链接
- $().SPServices.SPCascadeDropdowns({
- relationshipWebURL: "",
- relationshipList: "",
- relationshipListParentColumn: "",
- relationshipListChildColumn: "",
- relationshipListSortColumn: "",
- parentColumn: "",
- childColumn: "",
- CAMLQuery: "",
- CAMLQueryOptions: "<QueryOptions><IncludeMandatoryColumns>FALSE</IncludeMandatoryColumns></QueryOptions>", // Added in 2013.01
- listName: $().SPServices.SPListNameFromUrl(),
- promptText: "",
- simpleChild: false, // Added in v0.6.2
- selectSingleOption: false, // Added in v0.6.2
- matchOnId: false, // Added in v0.7.1
- completefunc: null,
- debug: false
- });