javascript - 使用 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>
解决方案
var claim = theMap.value;
此处未使用 claimVisit。只是 id 就够了
推荐阅读
- c# - 使用 ZXing 的 Zebra 扫描仪代替相机
- swift - Swift5如何将函数传递给向量/函数
- python - 具有多个元素的数组的真值是不明确的。使用多个条件时使用 a.any() 或 a.all()
- image - 简单机器学习图像分类模型的最佳实践 RESTful API 命名约定
- sql - 1 如果值不是 NULL,否则为 NULL (Oracle)
- ios - 使用没有返回的 Swift 组合的 POST 请求不适用于 AnyPublisher
- java - 带有弹簧启动的天蓝色应用程序服务:等待对预热的响应
- linux - fIm 试图在两个匹配模式之间找到一个字符串,然后使用 sed 在一个模式之前添加该字符串
- flutter - flt_telephony_info 得到空结果
- apache-kafka - Google Cloud Spanner 通过 Cloud Data Fusion 或其他方式实时更改数据捕获到 PubSub/Kafka