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

Question

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

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

我应该用 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 from an array and takes the above array like object as this objects together with Function#call.

作为find回调

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

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

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

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

How to use indexOf with datalist options

html

javascript

indexof

javascript-objects

html-datalist