{"id":886,"date":"2010-11-28T18:29:20","date_gmt":"2010-11-28T17:29:20","guid":{"rendered":"http:\/\/www.itidea.nl\/?p=886"},"modified":"2015-09-08T20:34:23","modified_gmt":"2015-09-08T18:34:23","slug":"cascading-dropdowns-with-jquery-and-spservices-on-a-page-or-webpart","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/cascading-dropdowns-with-jquery-and-spservices-on-a-page-or-webpart\/","title":{"rendered":"Cascading dropdowns with jQuery and SPServices on a page or webpart"},"content":{"rendered":"

The SPServices library on Codeplex (http:\/\/spservices.codeplex.com<\/a>) provides a lot of useful functionality to access SharePoint data.
\nOne of the functions is the SPServices.SPCascadeDropdowns function. Here is a link to the documentation of this function: http:\/\/spservices.codeplex.com\/wikipage?title=$().SPServices.SPCascadeDropdowns&referringTitle=Documentation<\/a>\u00a0\u00a0<\/p>\n

As explained on the site this function can be used to set up cascading dropdown on SharePoint forms. Repeat: on SharePoint forms<\/span>.
\nSometimes it\u2019s handy to use cascading dropdown lists on a regular page or in a webpart. For this purpose I made a simple jQuery plug-in to provide in this need. The functionality is not that extended as the SPServices.SPCascadeDropdowns, but I\u2019ll guess you get the point.\u00a0\u00a0<\/p>\n

Purpose\u00a0<\/h3>\n

The purpose in this example is to make cascading dropdowns with countries and cities. This information is stored in two SharePoint lists and displayed in a Content Editor Webpart on a page.\u00a0\u00a0<\/p>\n

Set up the lists<\/h3>\n

Create a list named Countries. \u00a0Fill in some country names in the default Title column.
\nCreate a list named Cities. Create a lookup column to the Countries list and name the column Country. Do not allow multiple values, the plug-in isn\u2019t ready for that. Fill in some cities and link them to a country.
\nAdd a document library e.g. with the name ICTLibrary. Of course you are free to choose the names, but be aware of the references in the code in this article, I use the names mentioned here.
\nUpload three items to this list:\u00a0<\/p>\n

    \n
  1. jquery-1.4.4.min.js<\/li>\n
  2. jquery-SPServices-0.5.8.min.js<\/li>\n
  3. jquery.itidea_spcascadingdropdown.js<\/li>\n<\/ol>\n

    The last file is the plug-in which provides the cascading functionality on a page.\u00a0\u00a0<\/p>\n

    Create the cascading dropdownlists<\/h3>\n

    To create the cascading dropdownlists on a page is quite easy. Just paste the following code to a Content Editor Webpart on a page:<\/p>\n

    \r\n<script type="text\/javascript" src="..\/ICTLibrary\/jquery-1.4.4.min.js"><\/script>\r\n<script type="text\/javascript" src="..\/ICTLibrary\/jquery.itidea_spcascadingdropdown.js"><\/script>\r\n<script type="text\/javascript" src="..\/ICTLibrary\/jquery.SPServices-0.5.8.min.js"><\/script>\r\n\u00a0\r\n\r\n<script type="text\/javascript">\r\n\r\n$(document).ready(function() {\r\n\u00a0\u00a0\u00a0 $('#countries').itidea_spcascadingdropdown(\r\n\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 relationshipList: "Cities",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 relationshipParentList : "Countries",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 relationshipParentListColumn : "Title",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 relationshipListChildColumn : "Title",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 relationshipListParentColumn : "Country",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 childdropdown : "cities"\r\n\u00a0\u00a0\u00a0 });\r\n});\r\n<\/script>\r\n\r\n<select id="countries" style="width:150px;">\r\n<\/select>\r\n<select id="cities">\r\n<\/select>\r\n<\/pre>\n
    There are a few things to know about the options:\u00a0\u00a0\u00a0<\/p>\n
    relationshipList
    \n<\/strong>The name of the list which contains the parent\/child relationships.\u00a0\u00a0<\/p>\n
    relationshipParentList
    \n<\/strong>The name of the list which contains the parent items.\u00a0\u00a0<\/p>\n
    relationshipParentListColumn
    \n<\/strong>The StaticName of the values column in the parent list.\u00a0\u00a0<\/p>\n
    relationshipListChildColumn<\/strong>
    \nThe StaticName of the child column in the relationshipList\u00a0\u00a0<\/p>\n
    relationshipListParentColumn
    \n<\/strong>The StaticName of the parent column in the relationshipList\u00a0\u00a0<\/p>\n
    childdropdown<\/strong>
    \nThe id of the child dropdownlist\u00a0\u00a0<\/p>\n
    promptText<\/strong>
    \nThe default text displayed in the dropdownlists\u00a0\u00a0<\/p>\n
    Most of the options are named the same as in the SPServices.SPCascadeDropdowns, because you are probably familiar with these names.\u00a0\u00a0<\/p>\n
    The cascading dropdownlists are looking like this now when nothing is selected:
    \n\u00a0\u00a0<\/p>\n
    \"\"<\/a>\u00a0\u00a0\u00a0<\/p>\n
    Countries and all cities are loaded in the dropdownlists:
    \n    \"\"<\/a>\u00a0\u00a0\u00a0<\/p>\n
    \"\"<\/a>\u00a0\u00a0\u00a0<\/p>\n
    When a country is selected:
    \n    \"\"<\/a>\u00a0\u00a0<\/p>\n
    Summary<\/h3>\n
    The plug-in is helpful if you want simple cascading dropdown lists on a page or in a webpart with the use of SharePoint data.\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\n
    Download<\/h3>\n
    Download the plug-in: [download#2] Updated version (November 30 2010; order by was hard-coded on ‘Title’ column)<\/p>\n
    For an extended plugin check out this post<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    The SPServices library on Codeplex (http:\/\/spservices.codeplex.com) provides a lot of useful functionality to access SharePoint data. One of the functions is the SPServices.SPCascadeDropdowns function. Here is a link to the documentation of this function: http:\/\/spservices.codeplex.com\/wikipage?title=$().SPServices.SPCascadeDropdowns&referringTitle=Documentation\u00a0\u00a0 As explained on the site … Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[11,13,33],"class_list":["post-886","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2007","tag-jquery","tag-moss-2007","tag-spservices"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/886","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=886"}],"version-history":[{"count":25,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/886\/revisions"}],"predecessor-version":[{"id":2039,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/886\/revisions\/2039"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=886"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=886"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=886"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}