如何在数据列表选项中使用indexOf

时间:2018-07-05 06:36:16

标签: javascript html javascript-objects indexof html-datalist

stateName中选择datalist(即佛蒙特州)时,我想从abbrName {{显示状态缩写名称} datalist(即VT) 1}}。

我当前的代码使用从option id=派生的索引值搜索datalist options,但是问题是objectdatalist不是排序方式相同,因此索引值object产生错误的结果。

我应该用z搜索datalist吗?如何找到IndexOf索引位置?

datalist
var n = document.getElementById("myInputId");
n.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("myButton").click();
  }
});

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 = document.getElementById('myInput').getElementsByTagName('option')[z].getAttribute('id');
    }
  });
}

myObj = {
  "type": "A",
  "info": [{
      "item": "1",
      "properties": {
        "id": "Vermont",
        "population": "620,000"
      }
    },
    {
      "item": "2",
      "properties": {
        "id": "Alabama",
        "population": "4,780,000"
      }
    },
    {
      "item": "3",
      "properties": {
        "id": "California",
        "population": "39,540,000"
      }
    }
  ]
}

1 个答案:

答案 0 :(得分:1)

当然会产生错误的结果。

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


或者您可以在数据列表中查找值,并将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')

一个人从一个数组中借用Array#find,并将上述对象之类的数组与Function#call一起作为this对象。

作为find回调

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

发生destructuring assignment,其中仅获取迭代对象的单个属性,然后将其与给定值进行比较。

如果比较返回true,则找到对象并从find返回。然后需要id属性。