Bind HTML dropdown list using SharePoint REST API

2
525
views

Download Code: Bind

 

In this blog I had explain how to bind an HTML dropdown list using SharePoint Representational state transfer calls.

Open a share point site

Create a simple custom list named “Technologies’ as a master contains Title field holds the records going to bind into HTML Input control.

Now Open sharepoint Designer to create a HTML file to render the content using CEWP (Content editor web part)

Add a jquery reference into it

Code:

<script src=”http://technologygeeks/sites/devsite/SiteAssets/jquery-3.1.1.min.js”></script>

HTML:

<div id=”dropdown”>

<select id=”picktech”>

<option value=”select”>Select</option>

</select>

</div>

REST Api call:

function getItems() {

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/GetByTitle(‘Technologies’)/items”,

type: “GET”,

headers: {

“accept”: “application/json;odata=verbose”,

},

success: function (data) {

var result  = data.d.results;

var selectInput  = ”;

 

for(var i=0; i<result.length; i++)

{

var selectVal= result[i].Title;

selectInput  = ‘<option value=’+ selectVal +’>’+ selectVal +'</option>’;

$(‘#picktech’).append(element);

}

 

 

},

error: function (error) {

alert(JSON.stringify(error));

}

});

}

 

Full code:

<script src=”http://technologygeeks/sites/devsite/SiteAssets/jquery-3.1.1.min.js”></script>

<div id=”dropdown”>

<select id=”picktech”>

<option value=”select”>Select</option>

</select>

</div>

 

<script>

$(document).ready(function(){

getItems();

});

function getItems() {

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + “/_api/web/lists/GetByTitle(‘Technologies’)/items”,

type: “GET”,

headers: {

“accept”: “application/json;odata=verbose”,

},

success: function (data) {

var result  = data.d.results;  // Get the results

var selectInput  = ”;       //create a variable for structure  a HTML to append select control

for(var i=0; i<result.length; i++)

{

var selectVal= result[i].Title;   // get the results of Title column into array

selectInput  = ‘<option value=’+ selectVal +’>’+ selectVal +'</option>’;  // pass the array of  values

$(‘#picktech’).append(selectInput);

}

 

 

},

error: function (error) {

alert(JSON.stringify(error));

}

});

}

 

</script>

Final result:

 

Next article let we see cascading dropdown using sharepoint list

 

Happy sharepointing!….

 

 

Please follow and like us:
0

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here