How to Show/Hide multiple column fields based on dropdown selection - SharePoint

Question

I am using a SharePoint list in which we are using multiple columns covering different process steps to be filled based on a dropdown selection.

The steps are different depending on the mission selection. I want to be able to show/hide fields column depending on the dropdown selection of the mission.

I have added a code here as an example to showcase what I need to do based on the following:
The mission selection column is called 'Selection' and includes dropdown options: 'Yellow', 'Orange', 'Red', 'Green'.

I worked the code on the following columns: 'Country', 'Animal', 'Fruit', and 'Colour'. However, the code is not working at all. I don't have experience in coding so obviously something is not working out but I am not able to detect the issue, so highly appreciate your support to provide any leads on this.

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

<script>
  $(document).ready(function () {
    //Show/hide columns based on Drop Down Selection
    $("select[title='Selection']").change(function () {
      var ddlValue = SPUtility.GetSPField('Selection').GetValue();
      if (ddlValue == 'Yellow') {
        SPUtility.ShowSPField('Country');
        SPUtility.ShowSPField('Colour');
        SPUtility.HideSPField('Animal');
        SPUtility.HideSPField('Fruit');
      }

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

      if (ddlValue == 'Green') {
        SPUtility.ShowSPField('Colour');
        SPUtility.ShowSPField('Animal');
        SPUtility.HideSPField('Country');
        SPUtility.HideSPField('Fruit');
      }
    });
  });
</script>

Answer 1

Your code looks good to me. I thinks there is some issue with the jQuery and SPUtility files you referenced in your code.

Make sure jQuery and SPUtility files are loaded properly on NewForm.aspx page?

If your file URL is like: https://tenant.sharepoint.com/sites/Mysite/siteassets/jquery-3.3.1.js then try referencing file like: /sites/Mysite/siteassets/jquery-3.3.1.js.

If that doesn't work for you then try adding complete file URL.

You can ensure the files are loaded or not under Sources tab in browser's developer tools. Also, if file is not loaded you will get 404 error in browser's console.

Also make sure that you are not loading jQuery files multiple times on the same page else it will conflict with the different versions.