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>
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
Post a Comment