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

Introduction 
 
In this article we explore how to set the default region in a multi-lookup column and save into the 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.

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.

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:



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

http://sitename/listname/NewForm.aspx

Step 1: Navigate to your SharePoint 2013 site.

Steps 2: 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".

Step 3: 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>

<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";

    $("[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

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 '