Today I got requirement to get the list data using rest and bind to html drop down . I am getting the information by filtering it from browser
(_api/web/lists/GetByTitle('Tabletop%20Sessions')/items?Select=Title";)
. As this is my first program can any one help me what's wrong in my below code in binding the data to drop-down.
<style type="text/css">
.textbox{
font-family : inherit;
font-size : 100%;width: 275px;
border: 4px solid #F7F9FA;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
-webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95A2A7 inset;
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95A2A7 inset;
height: 30px;
width: 275px;
display: block;
}
.fontsize{
font-style: arial;font-size:17px;
}
.select{
width: 285px;height: 25px;
}
</style>
<script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"> </script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<body>
<table>
<tr>
<td colspan="2"><img align="right" src=" Image URL"/>
</td>
</tr>
<tr>
<td colspan="2"><img src=""/>
</td>
</tr>
</tr>
<tr>
<td class="fontsize">Months:</td>
<td>
<select id="drbfunction" class="select">
<option selected="selected">Select</option>
</select>
</td>
</tr>
<tr>
<td class="fontsize"><br>Programes:</td>
<td><br>
<select id="drbprogrames" class="select">
<option selected="selected">Select</option>
</tr>
</table>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getprogrames);
function getprogrames(sender, args)
{
alert("in Programes");
var userid = _spPageContextInfo.userId;
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Tabletop%20Sessions')/items?Select=Title";
var requestHeaders = { "accept": "application/json;odata=verbose" };
$.ajax({
url: requestUri,
contentType: "application/json;odata=verbose",
headers: requestHeaders,
success: onprogramQuerySucceeded (data) {
var listData = data.d.results;
var itemCount = listData.length;
var processedCount = 0;
var functions = document.getElementById("drbprogrames");
for (var i = 0; i < result.length; i++)
{
var option = document.createElement('option');
option.text = option.value = result[i].Title;
functions.add(option);
}
},
error: function (data) {
alert(failure(data));
}
});
}
</script>