We can implement Cascading drop downs if we need to change the options or value of a column dynamically based on the selection from a Parent column. Below are code examples.
Cascading Drop Down Code for Lookup columns:
Provide your inputs in the below code.
Cascading Drop Down Code for Choice columns:
Note: This is using a slightly altered jquery.spservices library that I have attached. Also this example is for a two level cascading drop down code.
Cascading Drop Down Code for Lookup columns:
Provide your inputs in the below code.
<script src= "/sites/…/jquery-1.4.2.min.js" type=text/javascript></script> <script src= "/sites/…/jquery.SPServices-0.5.2.min.js" type=text/javascript></script> <script type= "text/javascript" > // Execute the following JavaScript after the page has fully loaded, when it's ".ready" $(document).ready( function (){ $().SPServices.SPCascadeDropdowns({ relationshipList: "Display Name of Master List" , relationshipListParentColumn: "Parent Column Internal Name from Master List" , relationshipListChildColumn: "Child Column Internal Name from Master List" , relationshipListSortColumn: "Sorting Columns Internal Name from Master List" , parentColumn: "Parent Column Display Name from List/Library" , childColumn: "Child Column Display Name from List/Library" }); }); </script> |
Cascading Drop Down Code for Choice columns:
Note: This is using a slightly altered jquery.spservices library that I have attached. Also this example is for a two level cascading drop down code.
<script src= "/sites/…/jquery-1.3.2.js" type=text/javascript></script> <script src= "/sites/…/jquery.SPServices-0.5.2.min.js" type=text/javascript></script> <script type= "text/javascript" > // Execute the following JavaScript after the page has fully loaded, when it's ".ready" $(document).ready( function (){ //Save existing values of Discipline Code and Document Type. The values are lost when cascading code runs. var VariableName1 = $( "select[title='Display Name of Parent Column in List/Library']" ).val(); var VariableName2 = $( "select[title='Display Name of Child Column in List/Library']" ).val(); // Cascade Dropdowns $().SPServices.SPCascadeDropdowns({ relationshipList: "Display Name of Master List 1" , relationshipListParentColumn: "Internal Name of Parent Column in Master List 1" , relationshipListChildColumn: "Internal Name of Parent Column in Master List 1" , parentColumn: "Display Name of Parent Column in List/Library" , childColumn: "Display Name of Child Column in List/Library" }); $().SPServices.SPCascadeDropdowns({ relationshipList: "Internal Name of Master List 2" , relationshipListParentColumn: "Internal Name of Parent Column in Master List 2" , relationshipListChildColumn: "Internal Name of Child Column in Master List 2" , relationshipListSortColumn: "Internal Name of Sorting Column in Master List 2" , parentColumn: "Display Name of Parent Column in List/Library" , childColumn: "Display Name of Child Column in List/Library" }); // Reset the Discipline Code to its original value before cascading code ran $( "select[title='Display Name of Parent Column in List/Lbrary']" ).val(VariableName1); // trigger the change event so the cascading code runs again $( "select[title='Display Name of Parent Column in List/Library']" ).trigger('change '); // reset the Document Type to its original value $("select[title=' Display Name of Child Column in List/Library']").val(VariableName2); }); </script> |
No comments:
Post a Comment