SharePoint 2010: How to create Cascading Lookup Field using Client Object Model

English In previous post I have demonstrated “How to create cascading lookup field” in SharePoint 2010 using InfoPath. I will extend the possibility by utilizing Client Object Model and SharePoint Designer; therefore we don’t need InfoPath to have the cascading lookup field. Using same scenario where City is cascading lookup field from the selected Country, we’ll see together how Client Object Model solve the problem. In this solution we need to create JS referral to SP.js for Client Object Model and JQuery to help us working with DOM. https://www.youtube.com/watch?v=sFiPtoGpjFI Some key points in the video: 1. Put JQuery distribution in 14hive\Layouts. 2. Add Javascript link referral in the AdditionalPageHead place holder.

 1: <SharePoint:ScriptLink Language\="Javascript" Localizable\="False" runat\="server" Name\="jquery-1.4.4.min.js"/>
``````
 2: <SharePoint:ScriptLink Name\="SP.js" runat\="server" OnDemand\="true" Localizable\="false"/>

3. Add Javascript code to modify cascading selector and create Client Object Model call to retrieve cascaded value in Main conten place holder.

 1: <script type="text/javascript"\>
``````
 2: // JQuery\_Script
``````
 3:
``````
 4: var spListItems;
``````
 5:
``````
 6: // Cascading lookup main function
``````
 7: function FilterLookup(filterSource,lookupList)
``````
 8: {
``````
 9:    var filterElement = $("select\[title='" + filterSource + "'\] option:selected");
``````
 10:    if(filterElement.length == 0) return;
``````
 11:
``````
 12:    var selectedFilterText =  filterElement.text();
``````
 13:    var selectedFilterValue = filterElement.value;
``````
 14:
``````
 15:    var clientCtx = new SP.ClientContext.get\_current();
``````
 16:    var spList = clientCtx.get\_web().get\_lists().getByTitle(lookupList);
``````
 17:
``````
 18:    var camlQuery = new SP.CamlQuery();
``````
 19:    camlQuery.set\_viewXml('<View><Query><Where><Eq><FieldRef Name=\\''\+ filterSource +'\\'/>' +
``````
 20:         '<Value Type=\\'Text\\'>'\+ selectedFilterText +'</Value></Eq></Where></Query></View>');
``````
 21:
``````
 22:    this.spListItems = spList.getItems(camlQuery);
``````
 23:    clientCtx.load(spListItems);
``````
 24:    clientCtx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );
``````
 25:
``````
 26: } // 
``````
 27:
``````
 28: function onQuerySucceeded(sender, args) {
``````
 29:
``````
 30:    alert(this.selectedFilterText);
``````
 31:    // Get CityElement Select or Input
``````
 32:    var cityElement = $("select\[title='City'\]");
``````
 33:    if(cityElement.length == 0) { alert('Unknown'); }
``````
 34:
``````
 35:     var options = '';
``````
 36:     var listItemEnumerator = spListItems.getEnumerator();
``````
 37:
``````
 38:     while (listItemEnumerator.moveNext()) {
``````
 39:         var oListItem = listItemEnumerator.get\_current();
``````
 40:         options += '<option value="' + oListItem.get\_id() + '">' + oListItem.get\_item('Title') +'</option>';
``````
 41:     }
``````
 42:    cityElement.html(options);
``````
 43: }
``````
 44:
``````
 45: function onQueryFailed(sender, args) {
``````
 46:     alert('Request failed. ' + args.get\_message() + '\\n' + args.get\_stackTrace());
``````
 47: }
``````
 48:
``````
 49:
``````
 50: // Attach function on document ready
``````
 51: $(document).ready(
``````
 52:    function() {
``````
 53:       ExecuteOrDelayUntilScriptLoaded(FilterLookup,"sp.js");
``````
 54:       //FilterLookup("Country","City");
``````
 55:
``````
 56:        // Get CountryElement Select or Input
``````
 57:       var countryElement = $("select\[title='Country'\]");
``````
 58:       if(countryElement.length == 0)
``````
 59:       {
``````
 60:            countryElement = $("input\[title='Country'\]");
``````
 61:       }
``````
 62:       if(countryElement.length != 0) {
``````
 63:        if(countryElement\[0\].optHid) {
``````
 64:           $("input\[id='" + countryElement\[0\].optHid + "'\]").bind("propertychange", function() { FilterCity(); });
``````
 65:
``````
 66:        } else{
``````
 67:           $("select\[title='Country'\]").change(function() { FilterLookup("Country","City"); });
``````
 68:
``````
 69:        }
``````
 70:
``````
 71:    }
``````
 72:
``````
 73:
``````
 74:    }); // Document ready
``````
 75:
``````
 76: </script>

4. Finally save and set the new form as default form.