Set default value to Multi-Lookup Form in SharePoint using jQuery

This SharePoint tutorial explains, how to set default value to Multi-Lookup Form in SharePoint using jQuery. we will explore how to set default region in multi-lookup column and save into list.

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

With that said here are the functions. The process to add and remove the items works a little differently based 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.

Set default value to Multi-Lookup Form in SharePoint 2013 using jQuery

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 as lookup column region.

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

Set default value to Multi-Lookup Form in SharePoint 2010 using jQuery

Instead just visit the new form directly:

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

Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link click. You can insert the HTML and/or JavaScript.

<script src="/Style%20Library/scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="/Style%20Library/scripts/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></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
var $resultSpOptions = "6|tMiddle East|7t|tNorth America|8t|tOceania|9t|tSouth America|t10|tThe Caribbean";
// append the new options to our hidden field (this sets the values into the list item when saving)

The result:

Set default value to Multi-Lookup Form in SharePoint using jQuery

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’]”.

Now a quick jQuery primer when 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 ‘

You may like following SharePoint jQuery tutorials:

This SharePoint tutorial, we learned how to set a default value to Multi-Lookup Form in SharePoint using jQuery.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.