Set Defaulting Values or removal in a Multi-Lookup field in SharePoint 2013 using jQuery

InfoPath alternatives for form designing SharePoint

Introduction:

In this article we explore 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.

Read some SharePoint tutorials on:




Set Defaulting Values or removal in a Multi-Lookup field in SharePoint 2013 using jQuery
Set Defaulting Values or removal in a Multi-Lookup field 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 Defaulting Values or removal in a Multi-Lookup field in SharePoint 2013 using jQuery
Set Defaulting Values or removal in a Multi-Lookup field in SharePoint 2013 using jQuery

Instead just visit the new form directly:
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:

Set Defaulting Values or removal in a Multi-Lookup field in SharePoint 2013 using jQuery
Set Defaulting Values or removal in a Multi-Lookup field in SharePoint 2013 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 ‘

Hope this will be helpful.

Similar SharePoint 2013 Tutorials


About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply