How to correct the below code to hide certain fields based on a drop-down value selection?

Question

One of the Forms I am working on, I want to hide fields called Holiday 1 Date and Holiday 2 Date based on a drop-down metadata column value selection. Below is the screenshot of the form.

Here is the code I wrote:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">

// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){

//Define which columns to show/hide by default
  $('nobr:contains("Holiday 1 Date")').closest('tr').hide();
  $('nobr:contains("Holiday 2 Date")').closest('tr').hide();

//Show/hide columns based on Drop Down Selection 
 $("select[title='Number of Holidays Worked']").change(function() {
  if ($("select[title='Number of Holidays Worked']").val() == "1") {
  $('nobr:contains("Holiday 2 Date")').closest('tr').hide();
  $('nobr:contains("Holiday 1 Date")').closest('tr').show();
  } else if($("select[title='Number of Holidays Worked']").val() == "2"){
  $('nobr:contains("Holiday 2 Date")').closest('tr').show();
  $('nobr:contains("Holiday 1 Date")').closest('tr').show();
  }
 });
});
</script>

Now as you can see from the above code, initially I am hiding both Holiday 1 Date and Holiday 2 Date fields. Then based on value selection in drop-down called 'Number of Holidays Worked' (choice values:0 , 1, 2, Default value is 0 for the drop-down), I want to further hide/show the two date fields. For some reason the code is not functioning properly. Initially its only hiding field: holiday 1 Date and Holiday 2 Date remains visible even though its set to hidden initially.

Also once the drop-down value is changed to 1, it makes Holiday 1 date field visible and does not do anything if value is switched to 2 or back to 1. Can someone please help me correct it? Thanks in advance.

Answer 1

I prefer native js solutions: function to select element with text:

function contains(selector, text) {
  var elements = document.querySelectorAll(selector);
  return [].filter.call(elements, function(element){
    return RegExp(text).test(element.textContent);
  });
}

then use sth like this:

contains('nobr',/Holiday 2 Date/gmi)[0].closest('tr').style.display = 'none'

and add evemt listener:

document.querySelector("select[title='Number of Holidays Worked']").addEventListener("change", function(){
    var currentValue = document.querySelector("select[title='Number of Holidays Worked']").value;
    if(currentValue == 1){
        contains('nobr', /Holiday 2 Date/gmi)[0].closest('tr').style.display = 'none';
        contains('nobr', /Holiday 1 Date/gmi)[0].closest('tr').style.display = 'block';
    } else if(currentValue == 2){
        contains('nobr', /Holiday 1 Date/gmi)[0].closest('tr').style.display = 'block';
        contains('nobr', /Holiday 2 Date/gmi)[0].closest('tr').style.display = 'block';
    } else {
        contains('nobr', /Holiday 1 Date/gmi)[0].closest('tr').style.display = 'none';
        contains('nobr', /Holiday 2 Date/gmi)[0].closest('tr').style.display = 'none';
    }
});

Don't forget script tag and $(document).ready(function(){})

Answer 2

This is going to sound silly, but.... :)

Your text "Holliday 2" has a typo with a double "l" in the snapshot. Remove the additional "l" and the code should probably work.