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

    Question

  • <table>

    <tbody><tr><td>Keyword(s):</td>
    <td><input name="input1"/></td></tr>
    <tr><td>Color:</td>
    <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>

    </table>

    <script language="javascript">

    ...
    </script>

    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

Answers

  • Hope this will work for you.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
    </head>
    <body>

        <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>pages</listName> \
     <viewFields> \
     <ViewFields> \
     <FieldRef Name='Title' /> \
     </ViewFields> \
     </viewFields> \
     </GetListItems> \
     </soapenv:Body> \
     </soapenv:Envelope>";
                $.ajax({
                    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>");     

                });

          
            }
        </script>


        
    </body>
    </html>

     

    Please let me know how it goes.

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

All replies