Populate dropdown using jquery ajax in SharePoint

How to Populate dropdown using jquery ajax in SharePoint


Step 1: Create a page and add Script Editor Web Part to it.

Step 2: Paste the below code to Script Editor Web Part.


Code:
              <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js"></script>
<script type="text/javascript">
var option;
var Banks;
 $(document).ready(function () {
     Banks = $("#ddlbanks");  // html control
     option = $("<option/>").attr("value",0).text("-Select-");
     Banks.append(option);
     populateBanks();
  });
function populateBanks(){

     $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Banks')/Items",
type: 'GET',
dataType: 'json',
async: false,
headers: {
    "accept": "application/json;odata=verbose;charset=utf-8"
},
success: function (data) {
         console.log(data);
    $.each(data.d.results, function (i, result) {
        Item = result.Title;
        Banks.append("<option value='" + Item + "'>" + Item + "</option>");
    });
},
error: function ajaxError(response) {
    alert(response.status + ' ' + response.statusText);
},
      });
}

</script>


<select id="ddlbanks"></select>






Comments

Popular posts from this blog

How to Customize exported excel's cell background color in Datatables

Clear DataTable on button click

Upload multiple attachments to SharePoint List Item using REST API jQuery, along with People Picker Column