Converting the Complex DropDown to a Simple DropDown using SPServices

Introduction

The SPComplexToSimpleDropdown function lets you convert a "complex" dropdown rendered by SharePoint in a form to a "simple" dropdown. It can work in conjunction with SPCascadeDropdowns; call SPComplexToSimpleDropdown. SharePoint Lookup Column renders DropDowns differently in Internet Explorer depending on whether they have fewer than 20 options or 20+ options.

First it appears like below:

To convert to simple DropDown we have to write the jQuery code in the page.

Rather than opening the EditForm in a popup, open the form in a page (To open the item in a different page copy the item url and then paste it in a new browser), then edit the page and add a content editor web part.

In the content editor web part put the below code.

<script language="javascript" src="/_layouts/Server/NewScript/jquery.min.js"type="text/javascript"></script>
<script language="javascript" src="/_layouts/Server/NewScript/jquery.SPServices-0.7.1a.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
    $().SPServices.SPComplexToSimpleDropdown({
     columnName: "City"
   });
});
</script>

Then save the page and then the complex DropDown will appear like below:

  

Summary

In this Article We achieve if the parent list has more than 20 entries. SharePoint 2010 changes from a DropDown to an ajaxy-style 'type ahead'-field.Using SPServices SPComplexToSimpleDropdown We convert into simple DropDown.