javascript - javascript を使用して 2 つのドロップダウンリストを入力できません

Question

JavaScript を使用して 2 つのドロップダウン リストを作成しようとしています。2 番目は最初は空で、最初の選択に応じて入力されます。

リストのコンテンツは django を使用してレンダリングされ、javascript コードは、「op」のレンダリングされた値に応じて、2 番目のドロップダウンリストを埋める必要があるかどうかを認識します。

私が見つけた問題は、2番目のリストを埋める必要があるまで、すべてが正常に機能することです。しかし、html で最初のリストをハードコーディングし、それが埋められている JavaScript の部分をコメントすると、最初のリストで項目を選択した後、2 番目のリストが完全に埋められます。

同じ実行で異なるドロップダウンリストに 2 回のオプションを追加することに問題はありますか?

JavaScript 関数

window.onload = function foo() {    
    var makeslist = document.getElementById('make');
    var modelslist = document.getElementById('model');
    var makestxt = "{{ makestxt }}";
    var makes = makestxt.split("%"); 
    var op = "{{ op }}";                        
    for (i=0; makes.length; i++){ 
        var makesvals = makes[i].split("$"); 
        var option1 = new Option(makesvals[1], makesvals[1], false, false);
        makeslist.options[makeslist.length] = option1; 
    }
    if(op == "1"){
        var modelstxt = "{{ modelstxt }}";
        var models = modelstxt.split("%");
        for (j=0; models.length; j++){ 
        var modelsvals = models[j].split("$"); 
        var option2 = new Option(modelsvals[1], modelsvals[1], false, false);
        modelslist.options[modelslist.length] = option2; 
        }
    }
}

htmlフォーム

<form action="" method="post" accept-charset="utf-8"> 
    <select name="make" onchange="submit()" id="make"> 
        <option>--</option>
    </select> 
    <select name="model" onchange="submit()" id="model"> 
        <option>Choose model</option> 
    </select> 
</form>