Using SPServices to Query a list in SharePoint 2010

1. Create 2 lists.

     1a. Coolcities List
     1b. SelectCity List

     2.   Download, Refer and test SPServices.
     2a. Follow the link to download the SPServices js file.
     2b. Refer the file similar the way done for the jquery.js file

    <script src="/Shared%20Documents/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Shared%20Documents/jquery.SPServices-0.7.1a.js" type="text/javascript"></script>


     2c. Test the SPServices file has been properly refered or the file is properly loading during the page    load. For this run the small script which alerts the user who is logged in during the page load.
Edit the newform.aspx and add the content editor webpart

Then paste the following code inside it

<script src="/Shared%20Documents/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Shared%20Documents/jquery.SPServices-0.7.1a.js" type="text/javascript"></script>



$(document).ready(function() {

var thisUserName = $().SPServices.SPGetCurrentUser({
fieldName: "Title",
debug: false
});

alert(thisUserName);

});

So the above code will alert the user who is logged in, once you get the alert that means the spservices is being loading properly, and you can remove the test code.

3. Building up the SPServices inside the onchange jQuery function.


<script src="/Shared%20Documents/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Shared%20Documents/jquery.SPServices-0.7.1a.js" type="text/javascript"></script>


<script type="text/javascript">


$(document).ready(function() {
$("select").change(function() {

var selectedValue = this.value;

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "CoolCities",
    CAMLViewFields: "<ViewFields><FieldRef Name='Description' /></ViewFields>",
     CAMLQuery: "<Query><Where><Eq><FieldRef Name='City'/><Value Type='Text'>" + selectedValue + "</Value></Eq></Where></Query>",
CAMLRowLimit: 1,
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = $(this).attr("ows_Description");
        alert(liHtml);
 $("input[title='Description1']").val(liHtml);
    });
    }
  });
});

});</script>

Output

-So when the drop down value is changed, on that event the CoolCities list is queried and the description of the selected city is displayed in the Description1 column of the SelectCity list.

Note :
The above code takes into consideration, that there is only one dropdown box in the SelectCity list,
if there are more than one then it would need some check before running the code.