Page Navigation Using a DropDownList in SharePoint List Using jQuery

Introduction

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

In this article I will demonstrate how to do the navigation to a link just by clicking a selected text of the dropdown list item.

It's very easy and can be done using a SharePoint List, Script Editor and jQuery.

Use the following procedure.

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



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 into the page, you will see an “EDIT SNIPPET” link click. You can insert the HTML and/or JavaScript code into the dialog.

<select id="SearchEngine" style="width: 30%">

    <option value="NAN">Select SearchEngine</option>

</select>

<script type="text/javascript" src="/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 urls = data.split(',');

            window.open(urls[0], '_blank');

        }

    });

</script>

Step 5: Save the Page DropDown List, it will be populated as below:

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

 

 

 

Conclusion

This article showed how to navigate to a specific link by selecting an item in a DropDown.