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!

Answer 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!

Answer 2

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?

Answer 3

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>