HTML WebPart dropdown a custom list

Question

I have a content editor web part that is referencing an html page. How can I fill a dropdown on that html page with the contents of a sharepoint custom list column?

Answer 1

To achieve your requirement, You can use

• JSOM
• REST API.

---

Example

Consider you have select control

<select id="SelectId">
   <option value="" selected>Select</option>
</select>

Bind list column to this control using JSOM

<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(BindDropDown, "sp.js");
});

var collListItem;

function BindDropDown() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle("your list name");

var camlQuery = SP.CamlQuery.createAllItemsQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onSucceed),
Function.createDelegate(this, this.onFailed));
}

function onSucceed(sender, args) {

var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();

$("#your Select control ID").append('<option>' + oListItem.get_item('Title') + '</option>')
}
}

function onFailed(sender, args) {
console.log(args.get_stackTrace());
}
}

Bind list column using REST API

Check this SE thread How to bind the REST API result