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!