如何在下拉菜单中显示文件所采用的某些元素

Question

我必须阻止代码流，因为我正在使用cytoscape.js，并且一旦创建了div cy，我就无法与下拉菜单之类的非cy元素进行交互。 这是我的代码：

<script>
    var list1 = [];
    var list2 = [];
    readTextFile("book.json", function(text){
        var data = JSON.parse(text);
        for (el in data.Concepts){
            var obj = data.Concepts[el];
            for(id in obj){
                list1.push(id);
            }
        }
        for (el in data.Roles){
            var obj = data.Roles[el];
            for(id in obj){
                list2.push(id);
            }
        }
    });
    document.write("<div id='cy'></div>");

    //CREATE CY 
    var cy = cytoscape({  
        container: document.getElementById('cy'),
        style: style
    });
<\script>

如何在下拉菜单的list1和list2中显示元素，以及用户从list1中选择一个元素并从list 2中选择一个元素的时间如何流程继续吗？ readTextFile的制作方法如下：

function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, false);
rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4 && rawFile.status == "200") {
        callback(rawFile.responseText);
    }
}
rawFile.send(null);
}