How to Hide Selections in Contact Form 7?(Dropdown Options)

How to hide selections in Contact Form 7? That is a question raised by a user of Contact Form 7.

Hello guys, I need help with my contact form 7 on the link provided, if the person selects tennis it has to show the age selection Under 10 and Under 16 only.

Can I have the step-by-step process of how I can fix it?

The page I need help with: https://www.summitsportsarena.com/early-bird-registration/

ajilo

According to his/her description, there are some dropdown options (Sports and Age Groups)in Contact Form 7. He wants to realize this:

When the user selects "Tennis" in the "Sports" group, there should be only two options in the "Age" group.

Here is the js code that I wrote to realize that:

<script>
// Get the select element for Sport
var sportSelect = document.querySelector('select[name="sport"]');

// Get the select element for Age Group
var ageGroupSelect = document.querySelector('select[name="Age"]');

// Add an event listener to the Sport select element
sportSelect.addEventListener('change', function() {
  // Check if the selected option is "Tennis"
  if (sportSelect.value === 'Tennis') {
    // Clear all existing options in the Age Group select
    ageGroupSelect.innerHTML = '';

    // Create new option elements and append them to the Age Group select
    var option1 = document.createElement('option');
    option1.value = 'Under 10';
    option1.textContent = 'Under 10';
    ageGroupSelect.appendChild(option1);

    var option2 = document.createElement('option');
    option2.value = 'Under 16';
    option2.textContent = 'Under 16';
    ageGroupSelect.appendChild(option2);
  } else {
    // If the selected option is not "Tennis", restore all options in the Age Group select
    ageGroupSelect.innerHTML = '<option value="Under 8">Under 8</option>\
      <option value="Under 10">Under 10</option>\
      <option value="Under 12">Under 12</option>\
      <option value="Under 14">Under 14</option>\
      <option value="Under 16">Under 16</option>\
      <option value="Other">Other</option>';
  }
});
</script>

I've tested it and it worked. Feel free to leave me a comment.