How to bind the sharepoint list 2010 values in the Html dropdownlist using Javascript/ECMAscript?

Question

I have created one Custom List in sharepoint 2010 as mentioned below:

LIST A:

Title        TeamName

A             cc

b             ddd

c             eee

I have created html table in the Content Editor webpart of sharepoint 2010 with one rows and two columns such as:

Name:        Teamnamedropdown

In Teamname is a html dropdown. I need to bind the values from sharepoint list A of the Column(TeamName) to the TeamNamedropdown. My output should in dropdown. Only using Javascript or ECMAscript i need to achieve this requirement.

Answer 1

Here is my solution

<select id="input2" style="width:30%"><option>Any</option></select>

<script type="text/javascript" language="javascript">
     $(document).ready(function () {
         var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>as</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='TeamName' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
         $.ajax({
             url: "lists.asmx",
             type: "POST",
             dataType: "xml",
             data: soapEnv,
             complete: processResult,
             contentType: "text/xml; charset=\"utf-8\""
         });
     });


   var select = $('#input2');

     function processResult(xData, status) {
         $(xData.responseXML).find("z\\:row").each(function () {
             select.append("<option>" + $(this).attr("ows_TeamName") + "</option>");     

        });


    }
 </script>

Please replace the list name and column name(ows_yourcolumname)

Answer 2

The easiest way to meet your requirement would probably be using SharePoint's web services to populate the drop down. Check out spservices: http://spservices.codeplex.com/

Answer 3

Here there is demonstrate nicely how to retrieve and bind list data to dropdowm list.

http://kamilmka.wordpress.com/2011/11/10/ecmascript-client-object-model-retrieve-data-from-a-list/

check out fillDropDown() function.