1- Define a folder to place javascript files. I used the following path:
"~sitecollection/_catalogs/masterpage/Display Templates/"
2- Upload the following files to the location you defined on step 1. Use the import files button on your sharepoint designer.
File 1: the jquery library.
File 2: the jquery SP Service library.
File 3: The custom code for the dropdown list
3 - Use the designer to edit the default list form for New Item (in this case nx.aspx)
4 - Add the following references to forms design.
<SharePoint:ScriptLink ID="jquery" runat="server" LoadAfterUI="True" Name="~sitecollection/_catalogs/masterpage/Display Templates/jquery-1.12.3.js"/>
<SharePoint:ScriptLink ID="spservices" runat="server" LoadAfterUI="True" Name="~sitecollection/_catalogs/masterpage/Display Templates/jquery.SPServices-2014.02.js"/>
<SharePoint:ScriptLink ID="trsp" runat="server" LoadAfterUI="True" Name="~sitecollection/_catalogs/masterpage/Display Templates/CostumDropdown.js"/>
Note that you should update the path if you uploaded the scripts into a different path.
5 - Identify the html element id of the field you wish to apply your dropdown list
6 - Using the Sharepoint designer Edit the custom javascript (file 3 uploaded on step 2).
$(document).ready(function(){
add_dropdown("lista1", "ctl00_ctl26_g_928acec0_5b91_4790_a300_9119e1116afe_ff21_ctl00_ctl00_TextField","http://w2012sharep/sites/ETN/Contactos/","Contactos", "Company" );
});
You only need to update the entry parameters for add_dropdown function:
1 - Name of the list (must be different for each dropdown)
2 - Element id you have reached in step 5.
3 - URL where the source of your dropdown list is.
4 - Name of the sharepoint list
5 - Name of the field on the source list
To add a new dropdown just copy the call for the function
$(document).ready(function(){
add_dropdown("lista1", "ctl00_ctl26_g_928acec0_5b91_4790_a300_9119e1116afe_ff21_ctl00_ctl00_TextField","http://w2012sharep/sites/ETN/Contactos/","Contactos", "Company" );
add_dropdown("lista2", "ctl00_ctl26_g_928acec0_5b91_4790_a300_9119e1116afe_ff21_ctl00_ctl00_TextField","http://w2012sharep/sites/ETN/Contactos/","Contactos", "Phone" );
});
And your set to go.
