Alex,
I am not real sure the direction you were going here but I have fixed the code to dynamically populate the select. I made the select change event populate a new table listing the layers for that service.
<!DOCTYPE html>
<html>
<head>
<title>Service Info</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<style>
html,
body,
#details {
padding: 0;
margin: 0;
height: 100%;
}
.dgrid-cell-padding {
padding: 10px !important;
}
.dgrid {
height: 100% !important;
}
.dgrid-cell {
border: 1px solid black !important;
}
</style>
<script src="http://js.arcgis.com/3.14/"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
require([
"esri/request",
"dojo/_base/array",
"dojo/dom",
"dojo/domReady!"
], function (esriRequest, array, dom) {
$(document).ready(function () {
var baseUrl = "http://webgisdevint1/arcgis/rest/services";
esriRequest({
url: baseUrl + "/",
content: {
"f": "json"
}
}).then(function( response ){
$.each(response.services, function (index, value) {
$('.selectpicker').append($('<option>', {
value: value.name + "/" + value.type,
text: value.name
}));
var data = array.map(response.services, function (service, index) {
return {
"url": "<a target='_blank' href='" + baseUrl + "/" + service.name + "/" + service.type + "'>" + baseUrl + "/" + service.name + "/" + service.type + "</a><br>",
"name": service.name,
"type": service.type,
"id": index
}
});
$('#example').DataTable({
destroy: true,
data: data,
columns: [
{
title: "URL",
data: "url"
},
{
title: "Name",
data: "name"
},
{
title: "Type",
data: "type"
}
]
});
});
});
$('.selectpicker').on('change', function () {
var baseFolder = $(this).find("option:selected").val();
esriRequest({
url: baseUrl + "/" + baseFolder,
content: {
"f": "json"
},
callbackParamName: "callback"
}).then(function (response) {
var data = array.map(response.layers, function (layer, index) {
return {
"url": "<a target='_blank' href='" + baseUrl + "/" + baseFolder + "/" + layer.name + "'>" +
baseUrl + "/" + baseFolder + "/" + layer.name + "/</a><br>",
"name": layer.name,
"id": index
}
});
$('#layers').DataTable({
destroy: true,
data: data,
columns: [
{
title: "URL",
data: "url"
},
{
title: "Name",
data: "name"
}
]
});
});
});
});
});
</script>
</head>
<body class="claro">
<select class="selectpicker" prompt="Search web GIS Folders:">
</select>
<table id="example" class="display" width="100%"></table>
<table id="layers" class="display" width="100%"></table>
</body>
</html>
