Question

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

我当前的代码使用从option id=派生的索引值搜索datalist options，但是问题是object和datalist不是排序方式相同，因此索引值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"
      }
    }
  ]
}

Answer 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属性。

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

1 个答案: