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

Customizing SharePoint list and implementing Quick search using jQuery

Enable and Disable Client side People Picker using jQuery

How to generate PDF using jsPDF and html2canvas library