时间戳

首页 > 解决方案 > 如何将 indexOf 与 datalist 选项一起使用

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

问题描述

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

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

我应该搜索datalistwithIndexOf吗？如何找到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>

标签： javascripthtmljavascript-objectsindexofhtml-datalist

解决方案

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

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

或者您可以搜索数据列表中的值并将其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 borrows Array#find from an array and takes the above array like object as this objects together with Function#call.

As find callback

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

a destructuring assignment takes place, where just a single property of the iterating object is taken and then compared with the given value.

If the comparision returns true, the object is found and returned from find. Then it takes the id propery.

推荐阅读