How to hide dropdown fields based on dropdown selection?

@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'] });

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!

@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 1900344379664 4666519730074 4513632515226 

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.

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

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?

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, 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.

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! 

Thank you Arianne Batiles

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