Hi Johnny J Johnny J Noelle Cheng

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:

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

A screenshot of a computer

Description automatically generated

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.

How to hide dropdown fields based on dropdown selection?

0 comments

Didn't find what you're looking for?