SharePoint 2013: Set Defaulting Values / Removal in a Multi-Lookup Field in (jQuery)

Article
1/17/2024

Introduction

In this article we explore how to set the default region in a multi-lookup column and save into the list.

Steps

List

First we'll start with the setup. Create yourself a list that will hold the lookup values. In this case it's a list of world region names but it can be anything you want. Just a custom list with the Title field is enough.

Functions

With that said here are the functions. The process to add and remove the items works a little differently based on how many items are in each of the text boxes in some cases, that's what the if statements handle. Note the selector variable and uncomment the appropriate 2013 depending on your deployment target.

https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/sagarp/set-defaulting-values-removal-in-a-multi-lookup-field-in-s/Images/World%20Regions.jpg

Now we need a list with a lookup column to select our World Regions from. Create another custom list (United Nations County) and add a column to it that is the lookup column region.

Here's what our form looks like when we add a new item:

https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/sagarp/set-defaulting-values-removal-in-a-multi-lookup-field-in-s/Images/Country.jpg

Instead just visit the new form directly as in the following:

http://sitename/listname/NewForm.aspx

Edit page

Navigate to your SharePoint 2013 site.

From this page select Site Actions | Edit Page:

Edit the page, go to the "Insert" tab in the Ribbon and click the "Web Part" option. In the "Web Parts" picker area, go to the "Media and Content" category, select the "Script Editor" Web Part and press the "Add button".

<script>

``$(document).ready(``function () {

``$(``"[id$='_SelectCandidate'] option[value='6']"``).remove();

``$(``"[id$='_SelectCandidate'] option[value='7']"``).remove();

``$(``"[id$='_SelectCandidate'] option[value='8']"``).remove();

``$(``"[id$='_SelectCandidate'] option[value='9']"``).remove();

``$(``"[id$='_SelectCandidate'] option[value='10']"``).remove();

``var $selOptions = ``"<OPTION title=Middle East value=6>Middle East</OPTION><OPTION title=North America value=7>North America</OPTION><OPTION title=Oceania value=8>Oceania</OPTION><OPTION title=South America value=9>South America</OPTION><OPTION title=The Caribbean value=10>The Caribbean</OPTION>"``;

``// this is the list of initial items (matching the ones above) that are used when the item is saved

``$(``"[id$='_SelectResult']"``).append($selOptions);

``// append the new options to our hidden field (this sets the values into the list item when saving)

``$(``"[id$='MultiLookup']"``).val($selOptions);

``});

</script>

The Result

https://csharpcorner-mindcrackerinc.netdna-ssl.com/UploadFile/sagarp/set-defaulting-values-removal-in-a-multi-lookup-field-in-s/Images/Nations%20and%20Country.jpg

For the hidden input, I still needed to use the ID's ending, but I noticed that in 2013 the values are a little different. In 2010 the selector is "[id$='MultiLookupPicker']" while in 2013 the selector is "[id$='MultiLookup']".

The following is a quick jQuery primer for selecting items:

$("[id='test']"); // id equals ' test '
$("[id!=' test ']") // id does not equal ' test '
$("[id^=' test ']") // id starts with ' test '
$("[id$=' test ']") // id ends with ' test '
$("[id*=' test ']") // id contains ' test '

Share via