0

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

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

我的 html

<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);
             }
4

2 回答 2

1

您永远不会选择要添加项目的元素。每次调用时传递document.getElementById(idOfParentNode)给它。processCSV您也不需要在select标签中内联调用。

（也就是说，plant_select 和 plantType_select 目前没有被定义为您显示的代码中的任何内容）

而且，因为您正在执行我们可以在全局范围内看到的所有 javascript，所以这些变量都附加到 window.... 这意味着您正在通过重新初始化来踩踏您的 xmlhttp 对象。考虑将更多内容封装到单个脚本块中的更好分解的函数中。

于 2013-10-14T20:47:04.167 回答
1

具有相同名称的第二个函数会覆盖第一个函数。

在不同的 .js 文件中使用两个同名方法

使用唯一的函数名称，或者只是将函数移出并调用两次。

function processCSV(file,parentNode) {...}

processCSV('/my/file/path', myParentNode);
于 2013-10-14T19:05:13.617 回答