Hide dropdown items from lookup field in SharePoint via jQuery

In one of my blogposts I show you how to Hide dropdown values from choice fields in SharePoint via Jquery. One of the comments on that blogposts is that this doesn’t work when you want to hide dropdown items from lookup field.

So, let’s get to work then!

SharePoint HTML output

I start off with a list containing 2 items:

– Paris

– London

I have another list with an extra column “lookupField” that is a lookup to that first list.

london and paris is shown
london and paris is shown

So, let’s take a look at the html output that SharePoint generates:

<td nowrap="true" valign="top" width="190px" class="ms-formlabel">
   <h3 class="ms-standardheader">
      <nobr>lookupField</nobr>
   </h3>
</td>

<td valign="top" class="ms-formbody">
   <span dir="none">
   <select name="ctl00" id="ctl00" title="lookupField">
      <option selected="selected" value="0">(None)</option>
         <option value="2">london</option>
         <option value="1">paris</option>
   </select>
</span>
</td>

The first part of the code (in the first td bracket) is used to show our title. The second part is our actual dropdown element with the various options.
You can see that we can get to our select element via the title, which is just the name of the field.

The code

To get to our select element we can use:


$(":input[title='lookupField']");

Underneath we can get to the options in 2 ways:
– use the value (in this case: 1 or 2)
– use the text (in this case: paris or london)

To remove a dropdown item from lookup field via the value:


$(":input[title='lookupField']").find("option[value='2']").remove();

To remove a dropdown item from lookup field via the text:


$(":input[title='lookupField']").find('option:contains(paris)').remove();

The result

We can see that our value “paris” is removed from our list.

only london is shown
only london is shown

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


2 thoughts on “Hide dropdown items from lookup field in SharePoint via jQuery”

  1. Things can get messy really fast with SharePoint’s dropdowns, especially when you go from 19 to 20 options and SharePoint renders the dropdown differently in IE.

    Consider using the SPFilterDropdown function in SPServices to protect yourself from the messiness. It also takes the logic out of code and into the values in the lookup list.

    M.

Leave a Reply

%d bloggers like this: