Page Navigation through the DropdownList in SharePoint List

Recently I got a requirement where I had to give a functionality to redirect to multiple external links from the SharePoint site.

In this tutorial, I am going to demonstrate how you can achieve the navigation to a link just by clicking to a selected text of the dropdown List item.

It’s very easy and can be achieved by using SharePoint List, Script Editor web part, and Jquery.

The Steps are as below:

Step-1: Create the List (Say SearchEngine)as below

Page Navigation through the DropdownList in SharePoint List
Page Navigation through the DropdownList in SharePoint List

Step-2: Navigate to your SharePoint 2013 site and create a Wiki Page or a Web Parts page.

Step-3: The process to add your JavaScript code is quite straightforward:

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-4: Once the Web Part is inserted on the page; you will see an “EDIT SNIPPET” link click. You can insert the HTML and/or JavaScript code in the dialog.

<select id="SearchEngine" style="width:30%"><option value="NAN">Select SearchEngine</option></select>
<script type="text/javascript" src="/Style Library/Styles/Scripts/jquery-1.10.1.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#SearchEngine option[value='NAN']").attr(‘selected','selected');
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>SearchEngines</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
<FieldRef Name='SearchUrl' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";

$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/Lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});

var select = $(‘#SearchEngine');
function processResult(xData, status) {
$(xData.responseXML).find("z\\:row").each(function () {
select.append("<option value='" +$(this).attr("ows_SearchUrl") + "‘>" + $(this).attr("ows_Title") + "</option>");
});
}

$(‘#SearchEngine').change(function() {
var data=$(this).val();
if(data!="NAN")
{
var arr = data.split(‘,');
window.open(arr[0], ‘_blank');
}
});
</script>

Step-5: Save the Page DropdownList Will Populated as below

Page Navigation through the DropdownList in SharePoint List
Page Navigation through the DropdownList in SharePoint List

Step-6: Select The Link Google. You will navigate to the url configured in the List.

Page Navigation through the DropdownList in SharePoint List
Page Navigation through the DropdownList in SharePoint List

You may like following SharePoint customization tutorials:

Here, we learned how to navigate to a particular link by selecting an item in the dropdown in SharePoint.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

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

>