{"id":946,"date":"2010-12-17T13:58:06","date_gmt":"2010-12-17T12:58:06","guid":{"rendered":"http:\/\/www.itidea.nl\/?p=946"},"modified":"2015-09-08T20:34:08","modified_gmt":"2015-09-08T18:34:08","slug":"extended-cascading-with-spservices-and-jquery","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/extended-cascading-with-spservices-and-jquery\/","title":{"rendered":"Extended cascading with SPServices and jQuery"},"content":{"rendered":"

Recently I wrote a plugin which provided cascading dropdowns with jQuery and SPServices, which you can find here<\/a>.<\/p>\n

To be more flexible about how to display this to the user I extended the plugin. With the extended plugin it is possible to show the parent values of the cascading part with radiobuttons and the child part still with a dropdown list. Also a new option is added to load the values of the childdropdown by default or to wait for the user to make a selection in the parent list.<\/p>\n

To show the values of the parent list in a radiobutton list\u00a0use the id of a div<\/span> element present in the page:<\/p>\n

\r\n<div id="countriesRadio"><\/div>\r\n<\/pre>\n
and call the plugin on this div:<\/p>\n
\r\n<script type="text\/javascript" src="..\/jQueryLibrary\/jquery-1.4.4.min.js"><\/script>\r\n<script type="text\/javascript" src="..\/jQueryLibrary\/jquery.itidea_spcascadingdropdownExtended.js"><\/script>\r\n<script type="text\/javascript" src="..\/jQueryLibrary\/jquery.SPServices-0.5.6.min.js"><\/script>\r\n<script type="text\/javascript">\r\n\r\n$(document).ready(function () {\r\n\r\n\u00a0\u00a0\u00a0 $('#countriesRadio').itidea_spcascadingdropdownExtended(\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: "citiesRadio",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 fillChildByDefault: true\r\n\u00a0\u00a0\u00a0 });\r\n\r\n});\u00a0\r\n\r\n<\/script>\r\n\r\n<\/pre>\n
In the above code sample the new option fillChildByDefault is set to false. This means the values of the parent will be showed, but no child values will be showed\u00a0 when the page loads. If this option is omitted in the above code the value is set to true by default in the plugin and the child values will be shown when the page loads.<\/p>\n
With the above settings the controls look like this:
\n\"\"<\/a><\/p>\n
By omitting the option fillChildByDefault (which is the same as setting this to true):
\n\"\"<\/a><\/p>\n
When an item is selected:
\n\"\"<\/a><\/p>\n
Summary<\/h3>\n
With the extended plugin more flexibility is added to show the values to the user. With this plugin it is still possible to show both lists as dropdownlists by replacing the div<\/span> element by a select<\/span> element with the same id as shown in the previous post <\/a>about cascading dropdowns.<\/p>\n
Download<\/h3>\n
Download the plug-in:\u00a0[download#4]<\/p>\n","protected":false},"excerpt":{"rendered":"
Recently I wrote a plugin which provided cascading dropdowns with jQuery and SPServices, which you can find here. To be more flexible about how to display this to the user I extended the plugin. With the extended plugin it is … 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,8],"tags":[11,33],"class_list":["post-946","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2007","category-sharepoint-2010","tag-jquery","tag-spservices"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/946","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=946"}],"version-history":[{"count":11,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/946\/revisions"}],"predecessor-version":[{"id":2038,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/946\/revisions\/2038"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}