Create Cascaded (related) Lookup Dropdown fields easy with no server deployment

February 17th, 2010 | Categories: JavaScript, SharePoint, SharePoint Lookup field | Tags: ,

I’ve added a new section on my page dedicated to JavaScript solutions that I’ve published. The latest one is intended for creating a Cascaded Lookup Dropdown fields in a SharePoint New or Edit Form.

What is a Cascaded dropdown? It’s a combination of two dropdown lists. By selecting an option in the first dropdown (parent) you filter the options in a second dropdown (child).

Using this simple-to-deploy and configure solution you can create multiple cascaded relations in the same form. It works in MOSS 2007 / WSS 3.0 and in MOS 2010 / WSF 4.0

You can visit the project page here or download the JavaScript solution from CodePlex.

  1. Noel Dsouza
    February 19th, 2010 at 18:54
    Reply | Quote | #1

    why is it that it only supports upto 19 items in the drop-down.

  2. Boris Gomiunik
    February 21st, 2010 at 12:43
    Reply | Quote | #2

    If you have more than 19 items in the dropdown, the dropdown list changes to input. More info can be found here:
    http://www.sharepointboris.net/2009/10/sharepoint-lookup-field-how-does-it-work-and-how-to-add-javascript-event-handler-function-to-it/
    The script is prepared and tested with lookup with up to 19 and also over 20 items.

  3. March 9th, 2010 at 18:03
    Reply | Quote | #3

    Awesome feature. Unfortunately, I cannot edit “Add new entry”-forms, even with websitecollection-admin rights. Is there any way to make this possible?

  4. March 9th, 2010 at 18:19
    Reply | Quote | #4

    another bummer. Found out your infopage on how to Insert CEWP and managing code. For those as blind as myself:
    http://www.sharepointboris.net/the-power-of-content-editor-webpart/inserting-cewp-and-managing-code/

  5. MarcvanEijk
    March 12th, 2010 at 00:00
    Reply | Quote | #5

    Hey Boris, the script is a real lifesaver. Its working great with 19- items. When i then add two more items (so it’s 20+) it no longer works. I’m i missing something?

  6. MarcvanEijk
    March 12th, 2010 at 00:11
    Reply | Quote | #6

    I troubleshooted some more. You are right (of course ;-) . The functionality is working with 20+ on the lists (parent and child).
    What i did was to set the Parent lookup to required and then it will stop working. When i took the requirement off it worked again.
    I think it probably has something to do with the deafult value of the lookup.
    Any idea’s how to get the lookups required without breaking your script?

  7. Boris Gomiunik
    March 12th, 2010 at 08:33
    Reply | Quote | #7

    I didn’t consider that. Thanks for poionting the issue out. I’ll take a look into it.

  8. vlas
    April 12th, 2010 at 12:43
    Reply | Quote | #8

    i have treid to do the same with a script on my own.
    i retrieved the data from a specifiek list with JQuery.
    i can put the results from the query into the dropdown.
    “it is a dropdown created in the document library settings.”
    when i run my editpage in sharepoint an i select a value from the dropdown, than i click on the “OK” botton for saving those value’s.
    i recieve a error “an unexpected error has occurred”.

    control1 = getTagFromIdentifierAndTitle(“select”,”DropDownChoice”,”dropdown1″);
    data for recieving the items.
    *******
    for (var i=0; i<rows.length; i++)
    {
    var item = rows[i];
    var myOption=new Option();
    myOption.text = item.getAttribute('ows_Title');
    myOption.value = i;
    control1.options[i] = myOption;
    }

    i looked at your code: the following line wont work with my.
    i think with a dropdown iets a different value than "childLookup".
    var choices = CascadingDropdown.childLookup.Object.choices;
    i have allsow tried to do something like this:
    control2.options[y](attributeValue(resultNodes[y], "ows_" + CascadingDropdown.childLookupTargetField) + "|" + attributeValue(resultNodes[y], "ows_ID"));

    what im a dooing whrong?
    thanks

  9. Vaibhavi
    June 8th, 2010 at 14:48
    Reply | Quote | #9

    I have to create cascading drop down in my list under my sharepoint site.
    There are two drop down country and state……

    I did the following steps….

    1. Create country list where title field specifies the country names.
    2. Create state lsit where title field specifies the state name and country field specifies the country name corresponding to state name. In this list country is lookup field for country list.
    3. Then i craete a country_state list where i added country and state column,both are lookup field for country and state list.
    4. After then i craete a new form in SPD under my country_state list and added the following script below

    and also added jquery.SPServices-0.5.5.js to my document library.

    $(document).ready(function() {
    $().SPServices.SPCascadeDropdowns({
    relationshipWebURL:”link of my sharepoint site”,
    relationshipList: “State_List”,
    relationshipListParentColumn: “Country”,
    relationshipListChildColumn: “Title”,
    parentColumn: “Country”,
    childColumn: “State”,
    debug: true
    });

    });

    But its not working

    When i open my country_state list and select any one country in drop down, states for that country will not be appear in the state drop down. Please solve my problem
    :(
    Waiting for reply.

  10. Boris Gomiunik
    July 18th, 2010 at 16:12

    Why don’t you use the script provided here instead of jquery?