How to Show/Hide Column Fields Based on Other Fields - SharePoint

Question

I have a table with multiple columns in SharePoint and I am frequently adding new records into this table. The hard part of this, having a lot of columns make it difficult and causes confusing.

In below code, I hide all the columns and based on selection in the dropdown list, the fields will be shown to be key in. This test dropdown list consists of Country, Fruit, Animal and Colour it only gives me two option showing and hiding but I want to do same process for multiple fields. I am not sure how to do it. I will be grateful for your help, if you could direct me on how to do it.

Thanks

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

<script>
 $(document).ready(function () 
{ // Get a the choice field 
var choiceField = SPUtility.GetSPField('Selection');

// Hide the target fields in form load

SPUtility.HideSPField('Country');
SPUtility.HideSPField('Fruit');
SPUtility.HideSPField('Animal');
SPUtility.HideSPField('Colour');

// create a function to show or hide a field based on the selected choice Field value 

var ShowHideField = function() { 
var selectedFieldValue = choiceField.GetValue(); 

if (selectedFieldValue != 'Country') {
SPUtility.ShowSPField('Country'); 
SPUtility.ShowSPField('Animal');} 

else if (selectedFieldValue != 'Fruit') {
SPUtility.ShowSPField('Fruit'); 
SPUtility.ShowSPField('Country');
SPUtility.ShowSPField('Animal');}

}; 


$(choiceField.Dropdown).on ('change', ShowHideField); });
</script>

@LZ_MSFT thank you for your help and I am sorry for misleading you.

I actually wanted to show the multiple fields based on particular selection in the dropdown list.

Let's say, as shown in the script above, when I choose country in the dropdown list both country and animal fields should appear or when I choose Fruit in dropdown list fruit, country and animal fields should appear. In above script, it works perfectly. However, I want to apply same process for more than 2 cases. Like, I want to choose Color and display only animal and fruit but I am not sure how to apply it after using If else statement.

If you could show me, I would be grateful for your help.

Thank you

LZ_MSFT LZ_MSFT · Accepted Answer · 2018-04-04T09:12:28

The following code for your reference:

<script src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var fields=["Country","Fruit","Animal","Colour"];
    hideFields(fields);
    $("select[title='Selection']").change(function(){
        $(".ms-standardheader nobr:contains('"+$(this).val()+"')").closest("tr").show();
    });
});
function hideFields(fields){
    for(var i=0;i<fields.length;i++){
        $(".ms-standardheader nobr:contains('"+fields[i]+"')").closest("tr").hide();
    }
}
</script>

If the code not meet your requirement, I suggest you provide more information for further research.

How to Show/Hide Column Fields Based on Other Fields - SharePoint

1 Answers