Hide/Show columns in Custom List based on dropdown selection

Question

I am trying to hide a column on page load and when a value is selected from a drop-down list, have the hidden dropdown appear. I am able to hide the column but when I choose the value in the drop-down, nothing happens.

This is the code I'm using:

$(document).ready(function(){


//Define which columns to show/hide by default

$("h3.ms-standardheader:contains('Project Subtype')").closest("tr").hide();

//Show/hide columns based on Drop Down Selection 

$("select[title='Project Type']").change(function() {
if ($("select[title='Project Type']").val() === "Photo") 
{ 
    $("h3.ms-standardheader:contains('Project Subtype')").closest("tr").show();
} 
else { 

    $("h3.ms-standardheader:contains('Project Subtype')").closest("tr").hide();
}  

 });
});

I've also tried to use this one with the same results:

$('nobr:contains("Project Subtype")').closest('tr').hide();

UPDATE: I've added alerts to try and filter out the issue and it seems like

$("select[title='Project Type']").change(function() {

seems to be the issue. But I have no idea why it's not being read.

Thank in advance for any ideas on this one!

I would rater use InfoPath with formatting rules to hide and show content — Mike
– Mike, Commented Dec 8, 2017 at 20:00
It would be a little easier to do it that way but because InfoPath is going to be phased out eventually, I'm trying to learn how to do it this way. — Natalie
– Natalie, Commented Dec 8, 2017 at 20:12

Community · Accepted Answer · 2020-06-15 08:48:55Z

10

Your code should be worked, Just one note If you are using SSL, so you should use the HTTPS JQuery reference.

The below code should work

<script type="text/javascript">
$(document).ready(function(){
   $('nobr:contains("Project Subtype")').closest('tr').hide();  
    //Show/hide columns based on Drop Down Selection 
   $("select[title='Project Type']").change(function() {
 if ($("select[title='Project Type']").val() != "Other") 
   {
     $('nobr:contains("Project Subtype")').closest('tr').hide();
   } 
 else 
   {
     $('nobr:contains("Project Subtype")').closest('tr').show();
   }
   });
});
</script>

Output

For more details, Please check

Show / Hide fields based on choice field selection using JQuery in SharePoint.

Show and hide fields based on a Choice field selection in ‘New Form’, ‘Edit Form’ and ‘Display Form’ in SharePoint 2013 / 2016 via SPUtility.js?

edited Jun 15, 2020 at 8:48

CommunityBot

1

answered Dec 8, 2017 at 22:18

Mohamed El-Qassas MVP♦

45.4k9 gold badges55 silver badges96 bronze badges

1

I use : .parent().parent().parent().hide() and .parent().parent().parent().show(), but your approach looks a lot cleaner, i'm going to start using yours ;

Mike
– Mike

2017-12-08 22:44:46 +00:00
Commented Dec 8, 2017 at 22:44
Comments are not for extended discussion; this conversation has been moved to chat.

Mohamed El-Qassas MVP
– Mohamed El-Qassas MVP ♦

2017-12-11 19:43:21 +00:00
Commented Dec 11, 2017 at 19:43
Check also Disable Choice Field in SharePoint Froms

Mohamed El-Qassas MVP
– Mohamed El-Qassas MVP ♦

2019-02-13 03:31:47 +00:00
Commented Feb 13, 2019 at 3:31

Add a comment |

Natalie · Accepted Answer · 2017-12-13 20:08:05Z

1

Got it figured out. I had renamed the "Project Type" column, even though it changed in SharePoint, the ID didn't. To check that, I clicked F12 for the developer tools, searched "Photo Type" and found that the name was actually "Photo Type Required Field". Once I updated my code to reflect that, I was good to go!

Rookie mistake!

Thanks M.Qassas for all your help!

answered Dec 13, 2017 at 20:08

Natalie

651 silver badge10 bronze badges

Add a comment |

Kushan L Perera · Accepted Answer · 2018-10-04 15:40:33Z

Had to change the code of "Mohamed El-Qassas" and use text() extension.

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script> 
<script type="text/javascript">
         $(document).ready(function () {
            $('nobr:contains("Other Project Type")').closest('tr').hide();
            $("select[title='Project Type']").change(function () {
            console.log("selection changed", $("[title='Project Type'] option:selected").text());
                if ($("[title='Project Type'] option:selected").text() != "Other") {
                    $('nobr:contains("Other Project Type")').closest('tr').hide();
                }
                else {
                    $('nobr:contains("Other Project Type")').closest('tr').show();
                }
            });
        });

</script>

Stack Exchange Network

Hide/Show columns in Custom List based on dropdown selection

3 Answers 3

Your Answer

Linked

Hot Network Questions

Hide/Show columns in Custom List based on dropdown selection

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions