How to bind SharePoint List Items to dropdownlist

SharePoint Online training courses

This SharePoint 2013  tutorial, we will discuss how to bind SharePoint list items to the dropdown list using the javascript object model (jsom) in SharePoint Online.

We will also see how to bind SharePoint list items to a dropdown list using Rest API as well as using the SharePoint server object model code.

Here I have a custom SharePoint list which has few items in it like below:

how to bind the dropdown value from a list using jsom
how to bind the dropdown value from a list using jsom

Bind SharePoint list items to dropdownlist using javascript/jQuery

Now, we will see how to bind SharePoint list items to a dropdown list in SharePoint using jsom.

We will create an HTML form, .js file and .css file and will display the form inside a web part page using a content editor web part.

HTML File

First of all, we have to create an HTML File, JS File, and CSS File for table designing purposes.

The HTML code is given below-

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/VendorJsFile.js"></script>
<link rel="stylesheet" href="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Preetihtml/VendorStyle.css">
<meta charset="utf-8" />
<title>Vendor List</title>
</head>
<body>
Vendor List: <select name="Vendor" id="MobileVendor"></select>
</body>
</html>

In this HTML Code, I have given the JS path link and as well as the CSS path link.

JavaScript File (.js file)

Now we will create the JavaScript file (.js) which will contain the JavaScript or JSOM (JavaScript object model) code.

$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(Bindvendor, "sp.js");
});
var collListItem;
function Bindvendor() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('VendorList');
var camlQuery = new SP.CamlQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemEnumerator = collListItem.getEnumerator();
$("#MobileVendor").append('<option>---Select Vendor---</option>')
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
$("#MobileVendor").append('<option>' + oListItem.get_item('Title') + '</option>')
}
}
function onQueryFailed(sender, args) {
alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace());
}
}

Here in this JS Code, Within the success method[“function onQuerySucceeded(sender, args)”], We are appending the options to the Drop down. For appending the options, we can write below code-

$("#MobileVendor").append('<option>' + oListItem.get_item('Title') + '</option>')

Where as “#MobileVendor” is the ID attribute for Drop down which is present inside the HTML Code.

.CSS File

I have created a CSS file which will add styling to the dropdown list. The Style code is given below:

#MobileVendor {
padding: 5px;
color: lightcoral;
font-size: 12px;
width: 150px;
}

Now, upload all the files to the SharePoint site assets library.

Then create a web part page in the SharePoint site. Edit the page and add a content editor web part to the web part page in SharePoint.

populate dropdown from sharepoint list using jquery
populate dropdown from SharePoint list using jquery

You may like following jsom SharePoint examples:

Bind SharePoint list items to dropdown list using Server Object Model

We can also easily bind SharePoint list data to a dropdown list using the SharePoint server object model.

if (!Page.IsPostBack)
{
using (SPSite site = new ("https://SiteURL"))
{
using (SPWeb web = site.OpenWeb())
{
SPList list = web.Lists["VendorList"];
ddlVendor.DataSource = list.Items;
ddlVendor.DataValueField = "ID";
ddlVendor.DataTextField = "Title";
ddlVendor.DataBind();
}
}
}

Once you run the above code, the items will be bind to the dropdown list in SharePoint 2013/2016.

You may like following SharePoint server object model code examples:

Bind SharePoint list items to dropdownlist using Rest API

In this section, we will discuss how to bind the dropdown from the SharePoint list using Rest API.

Below is the code to bind SharePoint list items to dropdown list using Rest API.

<select id="idDepartment" name="idDepartment"></select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Departments')/items";
$.ajax({
url: requestUri,
type: "GET",
headers: {
"accept":"application/json; odata=verbose"
},
success: onSuccess,
error: onError
});
function onSuccess(data) {
var allitems='';
var items = data.d.results;
for (var i = 0; i < items.length; i++) {
var optionhtml = '<option value="' + i + '">' + data.d.results[i].Title + '</option>';
$("#idDepartment").append(optionhtml);
}
}
function onError(error) {
alert(JSON.stringify(error));
}
</script>

You can see the output like below:

bind sharepoint list items to dropdownlist using rest api

You may like following SharePoint Rest API tutorials:

Conclusion

This SharePoint tutorial, We discussed how to populate the drop-down list from the SharePoint Online list by using JSOM (JavaScript Object Model).

We also saw, how to bind SharePoint list data to a dropdown list using the SharePoint server object model and we also saw how to bind SharePoint list items to a drop-down list using rest api.

>