1

I am currently creating a SP 2013 Site. I have 5 dropdown boxes, when the first one is clicked on (City) it then populates from a lookup table which city is chosen and then fills in the other dropdown boxes. How would I make that happen in SharePoint 2013

I already have a excel sheet that has all the data for the 5 columns.

Would I have to create a lookup list first? here is a example I am trying to replicate.

User chooses the MUNI witch is a dropdown, once I choose ADAMS the other dropdown boxes will auto-populate depending on what MUNI is chosen like below.enter image description here If a different MUNI is chosen, then the other textboxes will pre-populate depending on the MUNI

enter image description here

This is a portion of how my look would be once I import this excel list to a sharepoint list enter image description here

2 Answers 2

2

You will need to create the structure using SPServices.CascadeDropdowns like 404 said. Also make sure you have the fields that you want auto-populated set up as required fields. If they are not required and for some reason don't want them required you can do the following (I would recommend requiring the fields, I just wrote this out before that crossed my mind and thought it could still be relevant to someone so am still posting it):

To get the auto-population that you are looking for you will have to throw in a content editor web part or script editor web part on the form and put this in:

$(document).ready(function() {
    var muni = $("select[title='Choose Muni']"); //Finding the MUNI dropdown
    $(muni).attr("onchange","updateDropdowns()"); //Running function to update on change of MUNI field
})

function updateDropdowns() {
    var engArea = $("select[title='Eng Area']"); //Dropdown1
    var area = $("select[title='Area']"); //Dropdown2
    //Add remaining fields here.

    var engAreaValue = $("select[title='engArea'] > option:last").prop("value"); //Selecting option for Dropdown1
    var groupValue = $("select[title='Area'] > option:last").prop("value"); // Selecting option for Dropdown2
    //Add remaining field options here

    $(engArea).val(engAreaValue); //Changing value for Dropdown1
    $(area).val(areaValue); //Changing value for Dropdown2
    //Assign remaining field values here
}

That is how it would be set up for your first two fields. This works after you set up the SPServices.CascadeDropdowns if you only have one corresponding value for each MUNI and don't have the fields set as required.

EDIT:

Here are some links with good tutorials on how to set up the cascading dropdowns and how to use them:

http://www.uccorner.com/332/sharepoint/cascading-drop-down-multiple-levels/

http://www.codeproject.com/Tips/758909/Two-Level-Cascading-Drop-Down-in-SharePoint-using

7
  • Im not understanding this. are my fields Wire_CenterNum, Custodian, Area suppose to be choose fields or lookup fields? Feb 16, 2015 at 14:21
  • They would be lookup fields. You would need to build out the structure using SPServices.CascadeDropdowns first. After you have that set up, assuming that there is only one selection for each MUNI, you would use the code from above. It essentially would be selecting the only value in the lookup automatically after the MUNI is selected.
    – Jordan
    Feb 16, 2015 at 14:27
  • how would I build a structure using SPServices.CascadeDropdowns ? Feb 16, 2015 at 15:41
  • To set up that structure you will have to build out lists with corresponding lookups to the MUNI in this case. I'll update my answer with links of good resources.
    – Jordan
    Feb 16, 2015 at 15:46
  • this structure will be done through excel , then exported to a sharepoint list correct? Feb 16, 2015 at 15:59
1

You can use SPServices and jQuery to perform this task. Steps are as follows:

1) Create necessary lookup lists

2) Create target list and give reference of lookup list and lookup columns

3)In the target list, select the Default New Form under the List tab. enter image description here

4) Add a Content Editor Web part and select Edit HTML Source under the Format Text Tab.

5) Copy and Paste the following code in the HTML Editor:

<script language="javascript" src="/JSLibrary/jquery-1.4.2.min.js" type="text/javascript">  
</script> 
<script language="javascript" src="/JSLibrary/jquery.SPServices-0.5.7.min.js" type="text/javascript">

<script type="text/javascript">  

  $(document).ready(function() {  

        $().SPServices.SPCascadeDropdowns({  

            relationshipList: "<LIST NAME>",  

            relationshipListParentColumn: "MUNI",  

            relationshipListChildColumn: "Title",  

            relationshipListSortColumn: "ID",  

            parentColumn: "MUNI",  

            childColumn: "Custodian",  

            promptText: "Choose Custodian...",  

            debug: true  

        });  

});  

</script>  
3
  • thank you for this, I have to create columns in my site correct "MUNI" "Title" "ID" "Custodian" ? and do they have to be dropdown boxes or a import excel sheet? Feb 10, 2015 at 13:41
  • Im not understanding this. are my fields Wire_CenterNum, Custodian, Area suppose to be choose fields or lookup fields? Feb 16, 2015 at 14:23
  • These fields are supposed to be lookup fields.
    – 404
    Feb 17, 2015 at 18:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.