Hide Specific Dropdown Values

@stephen27

Code for use:

var tagsToRemove = ['0000000000','1111111','2222222'];  //value to hide from dropdown

function removeTagsWeDontWant() {
$('.nesty-panel').on('DOMNodeInserted', function(e){
for(var i in tagsToRemove) {
$('li#' + tagsToRemove[i]).remove();
}
});
};

if (window.location.href.indexOf("456898764") > -1) { // form id for which you want to hide value of dropdown
removeTagsWeDontWant();
}



Note: 0000000000 my dropdown value and 456898764 my form id, remove this and add yours

and if I'm missing something let me know :)

ThanX.

Thank you this worked great.

Based on how this executes it will remove all of the listed values from all dropdowns they appear in.

So if I have a priority field and an impact field both have a value of "low" available if I use this code "low" will be removed from both.

If there a simple way to target it for one field, priority, so that the "low" is only removed from priority but is available in impact?

Hi @ifra would you be able to tell me how to alter this code I wanted to remove specific field options based on another field selection? Thanks!

Hi Noelle Cheng, do you want to hide dropdowns on specific forms OR  do you want to hide specific values of dropdown on specific forms?

@ifra I want to hide specific values of a dropdown on a specific form if another value is selected on another dropdown.

On Form 789 there are the following fields

1. Dropdown1 had options A, B, C, 
2. Dropdown2 had options S, T, U, V, W

So if Dropdown1 had options A or B selected, then Dropdown2 would only show options S, T, U. But if Dropdown1 had option C selected, then Dropdown2 would show all the options S, T, U, V, W.

Hi @ifra Just wanted to check my last comment. You've been so helpful and really appreciate your contribution to the Zendesk community! :)

Hi Noelle Cheng, thanks for your recent comment.  :), I was traveling (between two states) that's why I wasn't able to answer.

I can help you to hide specific values of a dropdown on a specific form but without a second condition as that's not doable for me. I've tried so many times to work with the custom dropdown's value but didn't get any output.

Code for use: hide specific values of a dropdown on a specific form

var tagsToRemove = ['0000000000','1111111','2222222'];  //value to hide from dropdown

function removeTagsWeDontWant() {
$('.nesty-panel').on('DOMNodeInserted', function(e){
for(var i in tagsToRemove) {
$('li#' + tagsToRemove[i]).remove();
}
});
};

if (window.location.href.indexOf("456898764") > -1) { // form id for which you want to hide value of dropdown
removeTagsWeDontWant();
}



Note: 0000000000 my dropdown value and 456898764 my form id, remove this and add yours

Thanks 

Hi @ifra So sorry to bug thank you though! I need the two options to still be visible so I may just conditionally hide the other fields if that option is selected. 

I hate to bother you about something unrelated from this post but you have been such a huge help in the community, I was wondering if you could help me on a code I seem to be having issues on regarding attachments based on a drop down selection? If I provide the link to my post, would you be open to helping me? Thanks!

Noelle Cheng, okay I can try to solve this query, please share that link.

@ifra Thank you so much! Looks like someone was able to help me out on it and their suggestion worked. I really appreciate all your contribution and help!

Hi. Ifra Saqlain

Currently, 'DOMNodeInserted' is not available as per the comment below, so the solution you mentioned does not work.

https://support.zendesk.com/hc/ko/community/posts/4409217680410/comments/7741431026074

Have you found any clever way to solve this? I really need your help.

Hi 이지훈(Lee jihoon),

Please explain your use case so I'll customize the code.

Thanks

Hi Ifra Saqlain.

I tried the code below and it worked in July.

My savior~! 

Is there any way to solve this?

$(document).ready(function() {
  removeOptions();
});


function removeOptions() {
  $('.nesty-panel').on('DOMNodeInserted', function(e){
    for(var i in optionsToRemove) {
    	$('li#' + optionsToRemove[i]).remove();
    }
  });
};

if (window.location.href.indexOf("900000000000") > -1) { // Ticket form ID for hide the drop down option
  var optionsToRemove = [etc', 'voc']; // Ticket field option tag
	removeOptions();
}

And in this code, the ticket form ID and tag are anonymized.

Hi Lee, 

You missed the inverted coma, try this and let me know :)

$(document).ready(function() {
  removeOptions();
});


function removeOptions() {
  $('.nesty-panel').on('DOMNodeInserted', function(e){
    for(var i in optionsToRemove) {
    	$('li#' + optionsToRemove[i]).remove();
    }
  });
};

if (window.location.href.indexOf("900000000000") > -1) { // Ticket form ID for hide the drop down option
  var optionsToRemove = ['etc', 'voc']; // Ticket field option tag
	removeOptions();
}

Thanks

@Ifra Saqlain, I have added this snippet at the bottom of my script.js but am still seeing the option in my drop-down… Any suggestions?

function removeOptions() {
 $('.nesty-panel').on('DOMNodeInserted', function(e){
   for(var i in optionsToRemove) {
       $('li#' + optionsToRemove[i]).remove();
   }
 });
};
if (window.location.href.indexOf("11122233344456") > -1) { // Ticket form ID for hide the drop down option
 var optionsToRemove = ['my_field_value_tag']; // Ticket field option tag
    removeOptions();
}

11122233344456 is the Form ID placeholder and my_field_value_tag is the value tag for the option in the field I want to hide