Populating Dropdown Values from list Using SPService.

This blog post is to read list data from a SharePoint list using jQuery and SPServices. 

I have a list Called PolicyType with the columns (Title, PolicyName, Approver, Approved Date) and I am trying to populate the PolicyName in the DropDown from the List (PolicyType) and the on the change of Policy Type I am showing the Approver in the TextBox. Below is the code to achieve this.

1. Create the javascript File and upload to the Sharepoint Library.

2. Insert the ContentEditor WebPart and provide the SharePoint Library link in the CEWP.

<script type="text/JavaScript" src="..Library/jquery.min.js"></script>
<script type="text/JavaScript" src="../Library/jquery.SPServices-0.7.1a.min.js"></script>

<script type="text/JavaScript">
$(document).ready(function() {
$("select").change(function() {
var selectedValue = this.value;
var method = "GetListItems";
var list = "Policy Type";

var fieldsToRead = "<ViewFields>" +
 "<FieldRef Name='Approvers' /><FieldRef Name='PolicyName' />" +
 "<FieldRef Name='Title' /><FieldRef Name='ApproverDate' />"+
"</ViewFields>";

var query = "<Query><Where>"+
"<Eq><FieldRef Name='ID'/>"+
"<Value Type='Number'>"+ selectedValue +"</Value>"+
"</Eq></Where></Query>";

$().SPServices({
operation: method,
async: false,  //if you set this to true, you may get faster performance, but your order may not be accurate.
listName: list,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,

completefunc: function (xData, Status) 
{ 
$(xData.responseXML).SPFilterNode("z:row").each(function() 
{
var strapprovername = ($(this).attr("ows_Approvers"));
var strappname = strapprovername.substring(strapprovername.lastIndexOf("#") + 1)
$("input[title='PolicyOwner']").val(strappname);
});                
}
});
});
});
</script>