How to hide dropdown fields based on dropdown selection?

Hi Johnny J, you can actually create condition ticket field/s (customer facing or agent facing) based on the prior selection of the drop down.

This article might help you with this - https://support.zendesk.com/hc/en-us/articles/4408834799770-Creating-conditional-ticket-fields 

Hey @jahn11,

Thanks for your suggestion, creating conditional fields won't work with my request. When users choose a particular dropdown value from a dropdown menu, I want to make a certain field invisible to them. Fields ought to appear when a user chooses an alternative dropdown. Currently, when  user selects another drop-down option, the conditional fields totally hide all of the fields for them. So, using custom code will enable me to hide a certain field from the user based on their selection.

Just an example, there is a dropdown called State and the user chooses Georgia. Only certain fields should be visible upon selection, and the conditional fields hides all required field when the user chooses any other state than Georgia.

Hi Johnny,

Using conditional ticket fields can hide/display whole fields, but not options within a single field. Some customers have done custom coding to their Help Centers to change the appearance for end-users. Unfortunately, queries regarding custom coding and troubleshooting issues related to the customizations you have made are outside the range of the support we are able to offer. 

We have an app that can hide field options of a drop-down field which is called Ticket Field Manager App. The app allows you to hide options for a given dropdown field. However, this is only applicable in the agent interface and not to the request form. See Installing and using the Ticket Field Manager app for more details. 

Hey @arianne,

Thanks for your response, I understand that queries about custom coding fall outside of your support's scope.  But, in the past I've seen and had others assist us with the code, so I thought I'd try and see if anyone could assist with the custom code:)

Hi Johnny, 

Unfortunately, the previous community post has been archived. You might have some luck with this 3rd-party app called Formset since it allows customers to set the visibility of certain field options as well as it claims to work for both the agent and end-user experience. 

Thank you @arianne

Hey @Ahmad Zaid, Thank you, I'll have a look at it, but is the group only for developers?

Hello Johnny, if you happen to still need some assistance with this, I was able to hide certain ticket fields based on the selection in another field, this involves some if statements and dom observers, but can be achieved. Let me know if you would like me to share this workaround. Have a good day! 

Hello Kuba, yes, it's great to hear that you've found a workaround. Appreciate your willingness to share this solution. Please do share the details when you have a moment, it could be very helpful for our team. Thank you.

First, you will need to hide the fields that you want to show later on based on the selection in your dropdown field. In my case, I am using the code for both subject and description fields and hiding it with CSS (Customize > Edit code > styles.css)
 
#new_request > div.form-field.string.required.request_subject {
display: none;
}
 
#new_request > div.form-field.text.required.request_description {
display: none;
}

Then I apply the following code to show those fields based on a selection in my custom dropdown ticket field. 

PLEASE MAKE SURE TO CHANGE THE TICKET FIELD ID AND THE VALUE YOU WANT TO USE TO TRIGGER other fields to show up, I highlighted them in the code: 

function validateAndToggleUI() {
// Get the elements you want to hide
var subjectField = document.querySelector("#new_request > div.form-field.string.required.request_subject");
var descriptionField = document.querySelector("#new_request > div.form-field.text.required.request_description");

 
// Check if the value is "canyon"
if (request_custom_fields_9827560964756.value === "canyon") {
// If it's canyon, ensure the elements are visible
subjectField.style.display = "block";
descriptionField.style.display = "block";
} else {
// If not, hide the elements
subjectField.style.display = "none";
descriptionField.style.display = "none";
}
}

// Function to execute when mutations are observed
var observerCallback = function(mutationsList, observer) {
validateAndToggleUI();
};
 
// Create a MutationObserver instance to watch value changes on request_custom_fields_9827560964756
var observer = new MutationObserver(observerCallback);

// Assuming request_custom_fields_9827560964756 is the actual JS object
observer.observe(request_custom_fields_9827560964756, { attributes: true, attributeFilter: ['value'] });

Hello Kuba, thank you for sharing. It worked perfectly for me. I appreciate your assistance:)

I was wondering if it's possible to hide a specific value within a dropdown using a similar approach. For instance, consider dropdown A with two values: value 1 and value 2. Simultaneously, there's another dropdown, let's call it dropdown B, with three values: value x, value y, and value z.

When value 1 is selected from dropdown A, dropdown B should present all three values - x, y, and z. However, when value 2 is chosen, dropdown B should only display two values - y and z. Is this possible?

@kuba would you possible have a solution for what @johnny J mentioned? Thanks!

Hi @johnny11 @johnny12 @noelle 

I posted about this solution in 2023 but here it is again, if you want to hide a specific value in a dropdown see below, im using a nesty panel.

Full solution here:

Finding the ID in your HTML (Step 1)

First find the name of the dropdown ID. 

To find the IDs of the options, you'll need to enable "Emulate a focused page" in the console. Here's how:

1. Open the console in Chrome.
2. Click the three dots in the top right corner.
3. Go to "More tools" > "Rendering."
4. Click on "Emulate a focused page."

Once you activate "Emulate a focused page," you can open the dropdown, and it will remain open, allowing you to hover over the options and view their IDs.

My ID on the dropdown was called ‘new_application_form'

--------------------

Adding code to script.js file (Step 2)

Now paste this code below into the bottom of your script.js file, In my case I have my knowledgebase open to the public, so anonymous can view it, in this example I want to hide this dropdown option from all users in my organization, these are Anonymous, Staff, Students. You can check yours under the admin portal – people – configuration – tags.. I could also just restrict one or two groups if I wanted. 

Note, all you need to do is Replace the line ‘new_application_form’ with your dropdown ID. Apart from that paste is as is below. 

// For this funtion to work i needed to call it in my script.js file first.
$(document).ready(function() {
  var hideoption = document.getElementById('new_application_form');
  if (HelpCenter.user.role == "anonymous" || HelpCenter.user.organizations[0].name == "Staff" || HelpCenter.user.organizations[0].name == "Student") {
    if (hideoption !== null) {
      hideoption.style.display = 'none';
    }
    var optionsToRemove = ['new_application_form'];
    hideDropdownOptions(optionsToRemove);
  }
});

// This will hide the option with the id demo_field if the user is anonymous.
function hideDropdownOptions(tagsToRemove) {
  if (tagsToRemove) {
    Array.prototype.forEach.call(document.querySelectorAll(".nesty-panel"), function(tagsElement) {
      if (tagsElement !== null) {
        var fieldDisableTagsObserver = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
            if (mutation.type == 'childList') {
              if (mutation.addedNodes.length >= 1) {
                for (var i = 0; i < mutation.addedNodes.length; i++) {
                  for (var j in tagsToRemove) {
                    var tagElementToRemove = document.querySelector("li#" + tagsToRemove[j]);
                    if (tagElementToRemove !== null) {
                      tagElementToRemove.remove();
                    }
                  }          
                }    
              }
            }
          });
        });
        fieldDisableTagsObserver.observe(tagsElement, {childList: true});
      }
    });
  } 
}    

This function checks if the user is anonymous. If so, it iterates over all elements with the class nesty-panel and sets up a MutationObserver to watch for changes in the DOM within these elements. When nodes are added to the DOM, it checks if the option with the id standard_request exists and removes it if found.

Make sure that:

• The HelpCenter.user.role correctly reflects the user's role.
• The class nesty-panel accurately identifies the elements containing the dropdown.
• The ID new_application_form matches the ID of the option you want to hide.

If everything is set up correctly, this code should hide the new_application_form option for anonymous users and all signed in org users.

@Jakub - Thank you so much for sharing your workaround. I have been looking for something similar for MONTHS. 

Is there a way to not only hide the subject/description field using the code above but also pre-fill it? I've tried the below additional but it doesn't do what I was hoping it would:

/ Check if the value is "New Corporate Job Description"
if (request_custom_fields_32559862160923.value === "New Corporate Job Description") {
// If it's canyon, ensure the elements are visible
subjectField.style.display = "block";
document.querySelector('#request_subject').value= "New Corporate Job Description Request";
} else {
// If not, hide the elements
subjectField.style.display = "none";
}
}

Hi Hannah! 

Accessing the DOM for the editor that we use (TinyMCE) is a little tricky from a strict JS perspective, but thankfully it  has its own set of APIs that we can use here. I do want to note that since we don't own this product, I can't say for certain that something won't change with their APIs down the road, so we'll treat this as “it works now, but use at your own risk.” I did my testing without hiding the description, but that shouldn't matter in this scenario, as it looks like your code is still loading it in the DOM, you're just not displaying it.

let descriptionField = document.querySelector("#new_request > div.form-field.text.required.request_description")
 
descriptionField.style.display = "block";

function waitForTinyMCE(callback) {
if (window.tinymce) {
 callback();
} else {
 setTimeout(() => waitForTinyMCE(callback), 100);
}
}

waitForTinyMCE(() => {
const editor = tinymce.get('request_description');
if (editor) {
 editor.setContent('<p>Enter your content here</p>');
} else {
 console.error('Editor instance not found.');
}
});

Let me know if this works for you!

@Greg Katechis - THANK YOU! I appreciate you sending this. I ended up getting the following code to work as well:

//Hide Subject and Pre-Fill when XXXXXXX Topic is selected

// Function to execute when mutations are observed

var observerCallback = function(mutationsList, observer) {

validateAndToggleUI();

};

// Create a MutationObserver instance to watch value changes on request_custom_fields_XXXXXXX

var observer = new MutationObserver(observerCallback);

// Assuming request_custom_fields_XXXXXXX is the actual JS object

observer.observe(request_custom_fields_XXXXXXX, { attributes: true, attributeFilter: ['value'] });

function validateAndToggleUI() {

// Get the elements you want to hide

var subjectField1 = document.querySelector("#new_request > div.form-field.string.required.request_subject");

var requestSubject1 = document.querySelector("#request_subject");

// Check if the value is "XXXXXXX"

if (request_custom_fields_XXXXXXX.value === "FIELD VALUE TAG HERE" || "FIELD VALUE TAG HERE IF MULTIPLE") {

// If it's XXXXXXX, ensure the elements are not visible

subjectField1.style.display = "none";

// Pre-fill the subject field

requestSubject1.value = "XXXXXXX";

} else {

// If not, show the elements

subjectField1.style.display = "block";

// Clear the subject field if it's not the specific value

subjectField1.value = '';

}

}

// Function to execute when mutations are observed

var observerCallback = function(mutationsList, observer) {

validateAndToggleUI();

};

// Create a MutationObserver instance to watch value changes on request_custom_fields_XXXXXXX

var observer = new MutationObserver(observerCallback);

// Assuming request_custom_fields_XXXXXXX is the actual JS object

observer.observe(request_custom_fields_XXXXXXX, { attributes: true, attributeFilter: ['value'] });