I have a content editor web part with a dropdown using the <select> tag. However, I want the options

<option value="LinkTitle">Issue Type</option>
<option value="ReferenceID">Ref #</option>

to be from a SharePoint list as its data source. How to do this?

2 Answers 2


Check out this link:


The idea is to get the data from the list using JSOM (JavaScript Object Model), then loop through the items to populate the options in the dropdown list. Here is the code from the article in case the link gets broken:

_ctx = SP.ClientContext.get_current();

_web = _ctx.get_web();

var list = _web.get_lists().getByTitle(“Departments”);

//Create the query and get the results

var query = new SP.CamlQuery();

query.set_viewXml(“<View><Query><OrderBy><FieldRef Name=\”Title\” /></Order By></Query></View>”);

 _allDepartmentItems = list.getItems(query);

_ctx.load(_allDepartmentItems, ‘Include(Title, ID)’);

_ctx.executeQueryAsync(Function.createDelegate(this, this.PopulateDepartmentsSuccess),

Function.createDelegate(this, this.PopulateDepartmentsFailed));

The success function would look like this:

function PopulateDepartmentsSuccess() {

//Clear out current entries

var ddlDepartment = this.document.getElementById(‘ddlDepartment’);

ddlDepartment.options.length = 0;

//Iterate through new entries and populate DDL

var listEnumerator = _allDepartmentItems.getEnumerator();

 while (listEnumerator.moveNext()) {

var currentItem = listEnumerator.get_current();

ddlDepartment.options[ddlDepartment.options.length] = new Option(currentItem.get_item(“Title”), currentItem.get_item(“ID”));



Note that you should follow JSOM best practices which is not to declare things like _ctx right away, as they are added to the global namespace, instead you should use your own namespaces and use var keyword to declare variables, but if it's just this thing you need to do, you would be good to go following what's written in the article.


You can use spservies to get data from list and create html with option tag and append that html to your select tag. In below code I am trying to get all state value and putting them in Option tag and appending them to select attribute :

    operation: "GetListItems",
    async: false,
    listName: "State",

    completefunc: function (xData, Status) {
    if(Status == 'success' )

         $(xData.responseXML).SPFilterNode("z:row").each(function() {

                //var value= $(this).attr("ows_ID");
                var text = $(this).attr("ows_Title")



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.