Cascading dropdowns in SharePoint text fields – populated by lookup in another list (version 2)

03.11.2010 Updated the code to eliminate the need to refer other external resources than jQuery. Removed the argument “lookupSourceListURL” from the function call.

The code is tested in IE, Chrome and Firefox. Opera is not supported.

NOTE: When updating existing script you must modify the function call and remove the argument “lookupSourceListURL”.

---

I have previously posted a solution for creating cascading dropdowns from SharePoint single line text fields. Populated based on a query against another list.

I have reviewed the script to add a few enhancements.

• No more need to create a calculated column in the “lookup list”
• Less arguments to pass to the function – sleeker code
• Overcomes a possible bug regarding the previous version using “BeginsWith” rather than “Eq” to match the items

This release (as the previous) has these features:

• “Converts” standard SharePoint single line text fields to dropdowns
• Uses the converted SharePoint single line text fields to hold the values
• Populates the dropdowns by querying any SharePoint list or library
• Dynamically fills or clears the hidden fields holding the selected value to adapt to changes in the selections – thus preventing “impossible combinations”
• Preserves selections during page refresh due to form validation
• Reads back and fills the dropdowns if used in EditForm

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”). Upload jQuery and the file “spjs_CascadingDropDowns_v2.js” to that library.

The jQuery-library is found here. The sourcecode refers to jquery-1.4.2.min. Some of the functions are not supported in previous releases.

The sourcecode for the file “spjs_CascadingDropDowns_v2.js” can be found below.

Read here how to add a CEWP to the NewForm or EditForm, how to find the list Guid of your list, and how to find the FieldInternalName of your columns.

You can pull any values from another list – an example provided below.

Source list:

The field “Make” is the native “Title” field.

Target list:

The CEWP code – place below the Form:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/spjs_CascadingDropDowns_v2.js"></script>
<script type="text/javascript">
   // Use the FieldInternalName and not the Displayname.
   providerArr = ['Title','carModel','carColor','carInterior','carMilage'];
   consumerArr = ['Title','Model','Color','Year','Milage'];
   cascadingDropDowns_v2(providerArr,consumerArr,'{83eb224b-03fa-4a8b-b493-80253373a962}','<select>',5,true,false);
</script>

Parameters explained:

• providerArr: Array of FieldInternalNames of the fields in the source-list
• consumerArr: Array of FieldInternalNames of the fields in the list where the dropdowns will be created
• lookupSourceListGuid: GUID of the source-list
• dropDownDefaultvalue: The default value of dropdowns that are not empty – ex. <select>
• numberOfDropdowns: Number of levels of cascading dropdowns – (2-5)
• debug: true or false – if true: the textfield that holds the dropdownvalue is visible and some alerts are displayed

The code for the file “spjs_CascadingDropDowns_v2.js” can be found here

How to use these scripts in a customized form

Ask if anything is unclear.

Alexander