在 javascript 中创建第二个 html 元素会删除第一个

我有一个javascript代码，可以动态创建一个包含文件数据的选择框。它们有点大，一旦一切正常，我将尝试移动到外部 js 而不是在 HTML 中。我的问题是，当我尝试在不同的文件上运行相同的脚本时，它似乎会清除第一个脚本中的信息。所以我最终填充了一个选择元素和一个空白。最后一个脚本是唯一成立的脚本，这就是为什么我认为它以某种方式清除了第一个脚本。任何建议。我正在构建一个菜单，所以我需要这段代码是模块化的。提前谢谢。

*更新*我已经拆分了 processcsv 文件，但我仍然得到相同的结果。在函数的每个秋天，我都会传递一个不同的选择元素。在网页上，我只会看到最后一个执行，选择的已处理的 earliar 显示为空白。我认为问题是我的第一个 xmlrequest 永远不会达到 readystate == 4，但最后一个可以。我不确定我能做些什么来控制它，为什么除了最后一个失败之外，它都是失败的。

我的网页

<div class="menu_container">
    <div class="menu_element" id="plant_div">
        <select  class="Menu" id="plant_select">
        <script>     
             <!--var plant_select = document.createElement("select");  -->
             var datafile = '';
             var xmlhttp = new XMLHttpRequest();
             xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true);
             xmlhttp.send();
             xmlhttp.onreadystatechange = function()
             {
                if(xmlhttp.status==200 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plant_select,"select plant");
                }
             }
        </script>
        </select>
    </div>
    <div class="menu_element" id="plantType_div">
        <select  class="Menu" id="plantType_select">
        <script>
             <!--var plant_select = document.createElement("select");  -->
             var datafile = '';
             var xmlhttp = new XMLHttpRequest();
             xmlhttp.open("GET","http://localhost:8080/res/planttypes.csv",true);
             xmlhttp.send();
             xmlhttp.onreadystatechange = function()
             {
                if(xmlhttp.status==200 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plantType_select,"select PLant Type);
                }
             }
        </script>
        </select>
    </div>
</div>

一个单独的 js 文件，其中包含

function processCSV(file,parentNode,defaultmessage)
             {
                var frag = document.createDocumentFragment()
                , lines = file.split(''n'), option;                 
                var intial_option = document.createElement("option");
                intial_option.setAttribute("value","");
                intial_option.setAttribute("disabled","disabled");
                intial_option.setAttribute("selected","selected");
                intial_option.innerHTML = defaultmessage;
                frag.appendChild(intial_option)
                for (var i = 0, len = lines.length; i < len; i++){
                    option = document.createElement("option");
                    option.setAttribute("value", lines[i]);
                    option.innerHTML = lines[i];                        
                    frag.appendChild(option);
                    }
                parentNode.appendChild(frag);
             }