HOW TO Display a dropdown list based on data in a SharePoint List using jQuery/HTML

This code shows how to render a drop down list in SharePoint using jQuery/HTML.  The values displayed in the drop down list are stored in a backend SharePoint List.

 

Embed the entire code in a Content Editor Web Part.

 

<script type="text/javascript" src="http://intranet.na.kraft.com/sites/TC/jQuery/SharePointListHelper.js"></script>

 

<script type="text/javascript" src="http://intranet.na.kraft.com/sites/TC/jQuery/DropDownLoader.js"></script>

 

 

<script type="text/javascript">

 

 

function ddlLocation_onChange() {

 

 //Get Kraft Location selected

 var ddlKraftLoc = document.getElementById("ddlLocation");

 

  //alert("You selected " + ddlKraftLoc.options[ddlKraftLoc.selectedIndex].value);

 

 //open the Wiki page corresponding to the Location selected

 window.open(ddlKraftLoc.options[ddlKraftLoc.selectedIndex].value);

 

}

 

 

function LoadDropDown()  

{  

 

var insertZeroOption = new Option("-Select a Location-", "");

var updatedDDL = document.getElementById("ddlLocation");

updatedDDL.options[0] = insertZeroOption;

 

 

 //Create DropDownList object

 var ddl = new DropDownLoader("http://intranet.na.kraft.com/sites/TC");  

 

 //Populate Kraft Location DDL based on Items in SharePoint List

 ddl.LoadDropDown("Kraft Locations", "ddlLocation", "ows_Title", "ows_URL", "");

 

 

 

 

}  

 

 //Inject JavaScript function to populate Location DDL on Load event

_spBodyOnLoadFunctionNames.push("LoadDropDown");

 

</script>

 

<table id=Destination>

<tr>

<td width=3px>&nbsp;</td>

<td>

<SPAN class=ms-rteCustom-Kraft_Major_Headline>Destination Information</SPAN>

</td>

</tr>

<tr>

<td width=3px>&nbsp;</td>

<td>

<SPAN class=ms-rteCustom-Kraft_Minor_Headline>Select a Kraft top destination</SPAN>

</td>

</tr>

<tr>

<td width=3px>&nbsp;</td>

<td><select id="ddlLocation" onchange="ddlLocation_onChange();">

<option></option>

</select></td>

</tr>

</table>