How to fill HTML dropdown from client-side with sharepoint list data


  • <table>

    <td><input name="input1"/></td></tr>
    <td><select id="input2"> <option>Any</option> <option title="red" value="red">red</option> <option title="green" value="green">green</option> <option title="blue" value="blue">blue</option></select> <input name="schButton" id="Submit1" onclick="Redirect(form.input1.value, form.input2.value)" type="button" value="Search"/> </td></tr></tbody>


    <script language="javascript">


    Above is my HTML code in that I filled my <select> manually, but I have a sharepoint List called Colors I need to fill the <select> with the Color list .

    Please give code to write in javascript, I know about GetListItems() webservice call but how can use her or any other method?

    Thanks in advance

    Tuesday, November 30, 2010 9:10 PM


  • Hope this will work for you.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
        <script src="" type="text/javascript"></script>

        <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=''> \
     <soapenv:Body> \
     <GetListItems xmlns=''> \
     <listName>pages</listName> \
     <viewFields> \
     <ViewFields> \
     <FieldRef Name='Title' /> \
     </ViewFields> \
     </viewFields> \
     </GetListItems> \
     </soapenv:Body> \
                    url: "http://yoursharepointserver/yoursite/_vti_bin/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_Title") + "</option>");     





    Please let me know how it goes.

    • Marked as answer by TheEarth Wednesday, December 1, 2010 1:30 AM
    Tuesday, November 30, 2010 11:21 PM

All replies