首页 > 解决方案 > 使用 JavaScript 构建 HTML 数据列表在 FireFox 中有效,但在 Chrome 中结果不正确

问题描述

我正在尝试使用按地图编号选择的数组中的值填充声明的 HTML 数据列表。我在表单上有一个操作按钮,JavaScript 是一个函数。它在 FireFox 中完美运行,并为所选地图返回数组中的声明。Chrome 提供了不正确的声明数据列表。

选择 Map 2 会在 FireFox 中给出正确的列表:Ceeedee #1 和 Ceedee #2。Chrome 提供 Ceedee #1 和 Ceedee #2,但也提供 Map 3 的前三个声明。在 Chrome 中选择 Map 1 提供 Map 1 声明,但也提供 Map 3 的前两个声明和 Map 2 的第一个声明。有一条线正确声明后显示在列表中。这是 Windows 10。感谢您的帮助!

    <!--HTML form for the map selection, function button, and claims list:-->
    <div class="formRow">
    <label for="theMap">The claim was on which map? *</label>
    <fieldset>
    <input name="map" id="theMap" type="text" placeholder="Select Map Number" required list="mapList" />
    <datalist id="mapList">
    <option value="1" >
    <option value="2" >
    <option value="3" >
    </datalist>
    </fieldset>
    </div>
    <div class="claimRow">
    <fieldset>
    <input type="button" name="findClaims" value="After selecting a map, click to get the claims list for the map" onclick="getClaims(this.form)">
    </fieldset>
    </div>
    <div class="claimRow">
    <label for="theClaim">Which claim did you visit?</label>
    <fieldset>
    <input name="claim" id="theClaim" type="text" placeholder="Select claim name" list="claimsList" />
    <datalist id="claimsList" >
    </datalist>
    </fieldset>
    </div>

    <script>
    function getClaims (form) {   // Runs when the button is pushed on the form
    var str=''; // variable to store the options
    var claimsArray = new Array();
    var map1 = new Array("Caitlin", "Roadrunner", "More Values");
    claimsArray.push(map1);
    var map2 = new Array("Ceedee #1", "Ceedee#2");
    claimsArray.push(map2);
    var map3 = new Array("Happy Times", "Jacks Hideaway", "Renee's Best Chance", "Saddle Traps");
    claimsArray.push(map3);
    var claim = claimVisit.theMap.value;
    --claim;    // change the map number to an index value
    for (var i=0; i < claimsArray[claim].length;++i){ 
    str += '<option value="'+claimsArray[claim][i]+'" />'; // Storing options in variable
    }

    var my_list=document.getElementById("claimsList");
    my_list.innerHTML = str;
    }
    </script>

标签: javascriptarraysgoogle-chromefirefox

解决方案


var claim = theMap.value;

此处未使用 claimVisit。只是 id 就够了


推荐阅读