如何将 indexOf 与 datalist 选项一起使用

Question

当从datalist 中选择stateName（即佛蒙特州）时，我想在结果中显示datalist option id= 中的州缩写名称abbrName（即VT）。

我当前的代码使用从object 派生的索引值搜索datalist options，但问题是datalist 和object 的排序方式不同，因此索引值@ 987654331@ 产生错误的结果。

我应该用IndexOf 搜索datalist 吗？如何找到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"
      }
    }
  ]
}

<input list="myInput" id="myInputId" value="" option="">
<button id="myButton" onClick="result()">submit</button>

<datalist id="myInput">
  <option id="AL">Alabama</option>
  <option id="CA">California</option>
  <option id="VT">Vermont</option>
</datalist>

<p>Object index position: <span id="statePosition"></span></p>
<p>Object result (state name): <span id="stateName"></span></p>
<p>Object result (population): <span id="statePopulation"></span></p>
<p>Datalist index position (state abbreviation position): <span id="abbrPosition"></span></p>
<p>Datalist "option id" (state abbreviation name): <span id="abbrName"></span></p>

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')

an 从数组中借用Array#find，并将上述数组类对象作为this 对象与Function#call 一起获取。

作为find回调

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

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

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