Show/hide multiple fields based on drop down selection

Question

I am using SharePoint Calendar and we are using multiple columns and it is 25 columns, in each time when we want to add new record, we have to skip a lot of columns. So using a dropdown list by showing or hiding multiple columns based on my selection would be a good idea.

What I did after discovering below code, I create a dropdown named Selection and applied the script code below but however it does not work based on my selection. I will be grateful if you guys could help me on this issue.

Thank you

<script src="/SiteAssets/jquery-3.3.1.js"></script>
<script src="/SiteAssets/sputility.js "></script>

<script>

$(document).change(function() {
    var ddlValue = SPUtility.GetSPField('Selection').GetValue();

    if (ddlValue == 'Country') {
    SPUtility.ShowSPField('Country');
    SPUtility.ShowSPField('Colour');
    SPUtility.HideSPField('Animal');
    SPUtility.HideSPField('Fruit');
    }

    if (ddlValue == 'Fruit') {
    SPUtility.ShowSPField('Fruit');
    SPUtility.ShowSPField('Colour');
    SPUtility.HideSPField('Country');
    SPUtility.HideSPField('Animal');
    }
    if (ddlValue == 'Animal') {
    SPUtility.ShowSPField('Animal');
    SPUtility.HideSPField('Country');
    SPUtility.HideSPField('Fruit');
    SPUtility.HideSPField('Colour');
    }

    if (ddlValue == 'Colour') {
    SPUtility.ShowSPField('Colour');
    SPUtility.ShowSPField('Animal');
    SPUtility.HideSPField('Country');
    SPUtility.HideSPField('Fruit');
    }
});

</script>

lem.mallari lem.mallari · Accepted Answer · 2018-04-16T03:41:29

First thing you need to do is create a change() function linked to your dropdown so that the function triggers every time you change the values. You can do that by doing this:

$("your selector for your dropdownfield").change(function() {
    //your actions here
});

The next thing you need to do is get the value of the dropdown field then perform the hiding of the fields based from its value. To do that, you need to do the following:

var ddlValue = SPUtility.GetSPField('Selection').GetValue();

if (ddlValue == 'Test Value 1') {
    //hide fields for 'Test Value 1'
}

So if we combine the two together you will end up with:

$("your selector for your dropdownfield").change(function() {
    var ddlValue = SPUtility.GetSPField('Selection').GetValue();

    if (ddlValue == 'Test Value 1') {
        //hide fields for 'Test Value 1'
    }
});

You can just add more if conditions within the change() function and you should now be able to hide/show fields based on the value of the dropdown.

Let me know if it works!

Show/hide multiple fields based on drop down selection

1 Answers