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

Customizing SharePoint list and implementing Quick search using jQuery