4

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 Dec 8 '17 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 Dec 8 '17 at 20:12
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 src="https://code.jquery.com/jquery-1.7.2.min.js" type=text/javascript></script>
<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

enter image description here


For more details check

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!

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.