I have been having the hardest time populating a Materialize select box via Javascript. I am designing a Google web app, during which, when a user selects a particular company a select box is initialized and populated with a list of employees that work for that company. I have tried this every way I can think of, basing my syntax off of a previous Materialize autocomplete field that I thought would be initialized and passed an options object virtually the same way, but this did not work. I have included my Javascript, HTML, and the object I am trying to pass. Also, I am nearly done with this project and I have not used any JQuery to this point and would really prefer to not to if possible.
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("pageCSS"); ?>
</head>
<body>
<div class="input-field">
<select id="pocSelect">
<option value="" disabled selected>Choose Point of Contact</option>
</select>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIKd0URSDHKo781LAxniLUQKE-cJ-a3qg&libraries=places&callback=initMap&channel=GMPSB_addressselection_v1_cABC" async defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include("pageScripts"); ?>
</body>
</html>
<script>
function updateClientInfo(clientDataObj){
clientObj = clientDataObj[0];
var options = {};
var selectOptions = {};
options = clientDataObj[1];
options.forEach(function(v){
selectOptions[v] = false;
});
var pocSelect = document.getElementById("pocSelect");
M.FormSelect.init(pocSelect, {options: selectOptions});
}
</script>
selectOptions = {Greg: false, Jason: false, Avery: false, Rebecca: false, Terry: false}