0

ファイルからのデータで選択ボックスを動的に作成する JavaScript コードがあります。それらは少し大きいので、すべてが正常に機能したら、HTML ではなく外部 js に移動しようとしています。私の問題は、もちろん別のファイルで同じスクリプトを実行しようとすると、最初のスクリプトから情報が消去されるように見えることです。そのため、1 つの select 要素が入力され、1 つの空白が作成されます。最後のスクリプトだけが保持されます。そのため、最初のスクリプトを何らかの形でクリアしていると思います。助言がありますか。メニューを構築しているので、このコードをモジュール化する必要があります。前もって感謝します。

* UPDATE * processcsv ファイルを分割しましたが、それでも同じ結果が得られます。関数の各落下で、私は異なる選択要素を渡しています。Webページでは、最後に実行されたものだけが表示され、以前に処理された選択が空白になります。問題は、最初の xmlrequest が readystate == 4 を達成しないことですが、最後の xmlrequest は達成することだと思います。それを制御するために何ができるかわかりません。なぜ最後のもの以外はすべて失敗するのですか。

私の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.... にアタッチされています。単一のスクリプト ブロックで、より適切に分解された関数にカプセル化することを検討してください。

于 2013-10-14T20:47:04.167 に答える