How to define and access datalist options for alternate option names

问题: When a state name (i.e. California) is selected from the datalist, I want to display the state abbreviation from option id= in the results How do I define and access opt...

问题:

When a state name (i.e. California) is selected from the datalist, I want to display the state abbreviation from option id= in the results

How do I define and access options in datalist?

For example, if California is selected from the datalist, I want to return the result 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:

Use this.getAttribute('id') to get the ID from the input field.

Then something like the following:

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>

  • 发表于 2018-07-06 02:11
  • 阅读 ( 61 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除