Как определить и получить доступ к опциям списка данных для альтернативных имен опций - PullRequest
Новая
       15

Как определить и получить доступ к опциям списка данных для альтернативных имен опций

0 голосов
/ 05 июля 2018

Когда в списке данных выбрано название штата (например, Калифорния), я хочу отобразить сокращение штата от option id= в результатах

Как определить и получить доступ к options в datalist?

Например, если California выбрано из datalist, я хочу вернуть результат CA. 

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

function result() {
  document.getElementById("myResult").innerHTML = input.value;
 myObj.info.forEach(function(e, z) {
  var q = document.getElementById("myResult").innerHTML;
  if (e.properties.id == q) {
    document.getElementById("position").innerHTML = z;
    document.getElementById("width").innerHTML =     myObj.info[z].properties.width;

  }

});
}

myObj = {
  "type":"A",
  "info": [
    { "item":"1", "properties":{ "id":"Alabama", "height": "25", width: "50" } },
    { "item":"2", "properties":{ "id":"California", "height": "30", width: "40" } },
    { "item":"3", "properties":{ "id":"Vermont", "height": "20", width: "100" } }
  ]
}
<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>Option ID (State abbreviation):<span id="option"></span></p>
<p>Result:<span id="myResult"></span></p>
<p>Position in object:<span id="position"></span></p>
<p>Width:<span id="width"></span></p>

1 Ответ

0 голосов
/ 05 июля 2018

Используйте this.getAttribute('id'), чтобы получить идентификатор из поля ввода.

Тогда что-то вроде следующего:

document.getElementById('myInput').getElementsByTagName('option')[z].getAttribute('id')

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

function result() {
  document.getElementById("myResult").innerHTML = input.value;
 myObj.info.forEach(function(e, z) {
  var q = document.getElementById("myResult").innerHTML;
  if (e.properties.id == q) {
    document.getElementById("position").innerHTML = z;
    document.getElementById("width").innerHTML =     myObj.info[z].properties.width;

document.getElementById("option").innerHTML = document.getElementById('myInput').getElementsByTagName('option')[z].getAttribute('id');

  }

});
}

myObj = {
  "type":"A",
  "info": [
    { "item":"1", "properties":{ "id":"Alabama", "height": "25", width: "50" } },
    { "item":"2", "properties":{ "id":"California", "height": "30", width: "40" } },
    { "item":"3", "properties":{ "id":"Vermont", "height": "20", width: "100" } }
  ]
}
<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>Option ID (State abbreviation):<span id="option"></span></p>
<p>Result:<span id="myResult"></span></p>
<p>Position in object:<span id="position"></span></p>
<p>Width:<span id="width"></span></p>
...