文件选择的动态下拉列表

Question

我试图调整现有的.html文件来添加功能。我对前端开发环境非常陌生。

<form action="javascript:void(0);">
    <input type="button" name="Load" value="Load" onclick="fileLoad();"/>
    <input type="button" name="showFiles" value="Select File" onclick="selectFiles();"/>
</form>

我想有一个下拉列表（动态列表）。当我点击按钮"Select File"时会发生这种情况。我试图使用selectFiles()函数来实现这一目标。尽管如此，我可以从后端获取文件列表。我怎样才能在前端展示它

Answer 1

从服务器获取列表后，您可以执行此操作，

function makeList(fileNames) {
    // create a container for the select in your html
    var myDiv = document.getElementById("myDiv");  
    // Create and append select list
    var selectList = document.createElement("select");
    selectList.id = "filesSelect";
    myDiv.appendChild(selectList);

    // Create and append the options
    for (var i = 0; i < fileNames.length; i++) {
        var option = document.createElement("option");
        option.value = fileNames[i]; // this will depend on the datastructure of your list items
        option.text = fileNames[i]; // this will depend on the datastructure of your list items
        selectList.appendChild(option);
    }
}

此函数应作为服务器调用的回调。

我没有测试过，但它应该给你一个清晰的想法。