javascript - Select drop-down menu items do not appear when I click the drop-down

Question

I have an existing JS project in which I have added a select drop down menu which I am trying to populate with results from a get request to a web API. Strange thing I can't understand is that when I click it, the drop down will not display any of the option elements which have been appended to it. Also, when I look at the source under Chrome's F12 menu the HTML does not look as expected. Any hardcoded HTML options will have a LI nested under a UL element. The option elements are listed separately and the option elements that I added programmatically in JS are not listed under the UL element.

async function GetCallerIDs() {
var token = GetToken('testtoken');

//if (token == '') {
//    //alert("Token not found! ");
//}
//else {
    var decoded = decodeJwt(token);
    var tid = decoded.tid;
    var url = 'https://myurl/' + tid + '/users?api-version=1.0';
    await fetch(url, {
        method: 'GET',
        headers: {
            'Authorization': 'Bearer ' + token,
            'Content-Type': 'application/json'
        }
    }).then(response => {
        return response.json();
    }).then(data => {
        console.log('User data:', data);
        var dropDown = document.getElementById('selectUser');
        //var ul = dropDown.getElementsByTagName('UL')[0];
        for (var i = 0; i < data.length; i++) {
            var user = data[i];
            var option = document.createElement('option');
            //var li = document.createElement('LI');

            option.innerHTML = user.email;
            option.value = user.email;
            dropDown.appendChild(option);

            //li.id = ul.id + i;
            //ul.appendChild(li);
            //var span = document.createElement('span');
            //span.innerHTML = user.email;
            //li.appendChild(span);
        }
    });
//}   
}

You'll see the commented out attempts to get the UL element and add a new LI. This didnt work as they didn't appear to exist yet when the code runs. I think something else in the code is doing all this stuff with LI and UL after the select drop-down is created. I know that this project is using materialize for CSS stuff but I'm very new to all that and JS in general and this is an inherited project.

The HTML:

<div>
    <label for="selectUser" class="active" style="color: white; ">Contacts</label>
    <select name="selectUser" id="selectUser" style="color: white; ">
        <option>Choose an email to join call</option>
    </select>
</div>

The end result in Chrome F12:

<div>
    <label for="selectUser" class="active" style="color: white; ">Contacts</label>
    <div class="select-wrapper">
        <input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-e66de4f1-6df9-2073-72b2-6943b60959ab">
        <ul id="select-options-e66de4f1-6df9-2073-72b2-6943b60959ab" class="dropdown-content select-dropdown" tabindex="0">
            <li id="select-options-e66de4f1-6df9-2073-72b2-6943b60959ab0" tabindex="0" class="selected">
                <span>Choose an email to join call</span>
            </li>
        </ul>
        <svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
            <path d="M7 10l5 5 5-5z"></path>
            <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
        <select name="selectUser" id="selectUser" style="color: white; " tabindex="-1">
            <option>Choose an email</option>
            <option value="email1">email1</option>
            <option value="email2">email2</option>
        </select>
    </div>
</div>

When viewing the web page I only see the 'Choose an email option'. However when I click it the selected value changes to 'email1'. There are no exceptions in the browser console either.

This is very confusing so I'm hoping somebody more experienced with JS can point me in the right direction. Any help is massively appreciated!

Answer 1

等待大神答复