How to make a choice in a dropdown box render what appears in another dropdown box?

Question

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. If a different MUNI is chosen, then the other textboxes will pre-populate depending on the MUNI

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

Answer 1

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

Answer 2

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.

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>