Javascript 如何将indexOf与数据列表选项一起使用

当从

数据列表

中选择一个

州名

（即佛蒙特州）时，我想在结果中显示

数据列表

选项id=中的州缩写名

缩写名

（即VT）

我的当前代码使用从

对象

派生的索引值搜索

数据列表

选项

，但问题是

数据列表

和

对象

的排序方式不同，因此索引值

z

产生错误的结果

我是否应该使用

索引of

搜索

数据列表

？如何找到

数据列表

索引位置

var n=document.getElementById（“myInputId”）；
n、 addEventListener（“键控”，函数（事件）{
event.preventDefault（）；
如果（event.keyCode===13）{
document.getElementById（“myButton”）。单击（）；
}
});
函数结果（）{
var a=n.值；
document.getElementById（“stateName”）.innerHTML=a；
myObj.info.forEach（函数（e，z）{
var q=document.getElementById（“stateName”）.innerHTML；
if（e.properties.id==q）{
document.getElementById（“statePosition”）.innerHTML=z；
document.getElementById（“statePopulation”）.innerHTML=myObj.info[z].properties.population；
document.getElementById（“abbrName”）.innerHTML=document.getElementById（'myInput'）.getElementsByTagName（'option'）[z].getAttribute（'id'）；
}
});
}
myObj={
“类型”：“A”，
“信息”：[{
“项目”：“1”，
“财产”：{
“id”：“佛蒙特州”，
“人口”：“620000”
}
},
{
“项目”：“2”，
“财产”：{
“id”：“阿拉巴马州”，
“人口”：“4780000”
}
},
{
“项目”：“3”，
“财产”：{
“id”：“加州”，
“人口”：“39540000”
}
}
]
}

提交
阿拉巴马州
加利福尼亚
佛蒙特州
对象索引位置：

对象结果（状态名称）：

目标结果（总体）：

数据列表索引位置（州缩写位置）：

数据列表“选项id”（州缩写名）：

当然，它会产生错误的结果

您可以将选项和数组的顺序更改为相同索引的相同值

---

或者您可以搜索数据列表中的值，并将

id

作为

abbrName

function result() {
    var a = n.value;
    document.getElementById("stateName").innerHTML = a;
    myObj.info.forEach(function (e, z) {
        var q = document.getElementById("stateName").innerHTML;
        if (e.properties.id == q) {
            document.getElementById("statePosition").innerHTML = z;
            document.getElementById("statePopulation").innerHTML = myObj.info[z].properties.population;
        }
    });
    document.getElementById("abbrName").innerHTML = [].find.call(document.getElementById('myInput').getElementsByTagName('option'), ({ value }) => value === a).id;
}

它使用类似数组的对象

document.getElementById('myInput').getElementsByTagName('option')

a从数组中借用，并将上述类似数组的对象作为

this

对象与

作为

find

callback

({ value }) => value === a

发生一个迭代，其中只获取迭代对象的一个属性，然后与给定值进行比较

---

如果比较返回

true

，则会找到该对象并从

find

返回该对象。然后它需要

id

属性。

是的，但是我不想让顺序影响选项或数组。太好了！非常感谢。作为一个初学者，如果我想读更多，你会如何描述这个解决方案，关键术语等。？（{value}）=>value==a.id；与其使用数组，不如使用一个对象，其键是datalist中选项值的ID？有趣的想法，但实际上我是直接从外部JSON检索数据。那么呢？您可以轻松编写将数组转换为对象的代码。感谢您的提示，我将对此进行研究。您还有其他的解决方案吗？