Get SP list items in select tag

Question

I am trying to get list items in select tag but it is not working.I have tried to fix this in many different ways but nothing works. my code:

<select id ="listBox" multiple="multiple" style="width:200px; height:400px;">
    <option></option>
</select>

var context = new SP.ClientContext.get_current();
var hostWebUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var parrentContext = new SP.AppContextSite(clientContext, hostWebUrl);
var parentWeb = parrentContext.get_web();
var list = parentWeb.get_lists().getByTitle("myList");
var listItems = list.getItems("");

$(document).ready(function () {
clientContext.executeQueryAsync(retrieveListItems);

});

function retrieveListItems() {

clientContext.load(listItems);
clientContext.executeQueryAsync(onSuccess2, onFail)

}

function onSuccess2() {
var onGoing = document.getElementById('listBox');

onGoing.options.length = 0;

var listEnumerator = listItems.getEnumerator();

while (listEnumerator.moveNext()) {

    var currentItem = listEnumerator.get_current();
    var listBoxItems = currentItem.get_item("Title");
    onGoing.options[onGoing.options.length] = new Option(listBoxItems, currentItem.get_item("Title"));
}

function onFail(sender, args) {
    alert(args.get_message());
}

}

function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
    var singleParam = params[i].split("=");
    if (singleParam[0] == paramToRetrieve)
        return singleParam[1];
}

}

Answer 1

I've edited the complete code, to match your code.

And don't forget to set permissions in the Appmanifest.xml.

This should work:

App.js:

'use strict'

var context = SP.ClientContext.get_current();
var listItems;
var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
var parentContext = new SP.AppContextSite(clientContext, hostweburl);
var parentWeb = parentContext.get_web();
var list = parentWeb.get_lists().getByTitle("myList");
var listItems1;
var currentItem;

$(document).ready(function () {
});

function retrieveListItems() {
    listItems = list.getItems("");

    context.load(listItems, 'Include(ID, Title)');

    context.executeQueryAsync(onSuccess2, onFail)
}
function onSuccess2() {
    var onGoing = document.getElementById('listbox');

    onGoing.options.length = 0;

    var listEnumerator = listItems.getEnumerator();

    while (listEnumerator.moveNext()) {

        var currentItem = listEnumerator.get_current();
        var dropItems = currentItem.get_item("Title");
        onGoing.options[onGoing.options.length] = new Option(dropItems, currentItem.get_item("ID"));
    }
}
function doSomething() {
    var id = $('#listbox').find('option:selected').val();

    currentItem = list.getItemById(id);

    context.load(currentItem);

    context.executeQueryAsync(onSuccessdoSomething, onFail)
}
function onSuccessdoSomething() {

    $("#DivDescription").html(currentItem.get_item('Title'));
}

function onFail() {
    alert('Failed');
}
function getQueryStringParameter(urlParameterKey) {
    var params = document.URL.split('?')[1].split('&');
    var strParams = '';
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split('=');
        if (singleParam[0] == urlParameterKey)
            return decodeURIComponent(singleParam[1]);
    }
}

In PlaceHolderMain in Default.aspx

<td class="td3">
    <div id="DivOnGoing">
        <select id="listbox" size="10" name="decision" style="width: 50%" onchange="if (this.selectedIndex >= 0) doSomething();">
        </select>
    </div>
</td>
<input id="Button1" type="button" value="button" onclick="retrieveListItems()" />
<div id="DivDescription"></div>