从数据列表中的选定选项中获取自定义属性

Question

当我从数据列表中选择一个选项时，我想获取其自定义属性“位置”并打印它。 我知道 select 有 selectedIndex 但我如何使用 datalist 完成此操作？

<!DOCTYPE html>
<html>
<body>

<input type="text" id="StartingAddressField" size="50" placeholder="Select item from list" list="select">
  <datalist id="select" style="display:none;" onchange="Select1Changed();">
  <option value="one" location="3"/>
  <option value="two" location="15"/>
  <option value="three" location="27"/>
  </datalist>
</body>
</html>

Answer 1

 const dataList = document.getElementById('select'); const textInput = document.getElementById('StartingAddressField'); const getSelecteOptionLocation = () => { for (let i = 0; i < dataList.options.length; i++) { if (dataList.options[i].value === textInput.value) { return dataList.options[i]; } } } textInput.addEventListener('change', () => { const selectedOption = getSelecteOptionLocation(); if (selectedOption == undefined) { console.log('option not included in the datalist'); } else { console.log(selectedOption.getAttribute('location')); } });

 <!DOCTYPE html> <html> <body> <input type="text" id="StartingAddressField" size="50" placeholder="Select item from list" list="select" onBlur="getSelecteOptionLocation()"> <datalist id="select" style="display:none;"> <option value="one" location="3" /> <option value="two" location="15" /> <option value="three" location="27" /> </datalist> </body> </html>

Answer 2

通过使用document.getElementById选择元素，您将获得HTMLCollection ，您可以对其进行迭代（在您的情况下为选项列表）并使用附加到每个元素的属性对象找到所需的属性。

我还发现，如果需要，一旦选择了值，datalist 将不可用，否则您可以查看该错误。

 function Select1Changed(elem) { let location = 'please select a valid option'; let dt = document.getElementById('select'); // dt contains a HTMLCollection of options so use for loop to iterate it use childElementCount to get the length if loop for (let i = 0; i < dt.childElementCount; i++) { // check the selected value with option values. if (dt.children[i].attributes.value.value === elem.value) { // if Hit use the attributes object to find your attribute and get its value. location = dt.children[i].attributes.location.value; } } alert(location); }

 <!DOCTYPE html> <html> <body> <input type="text" id="StartingAddressField" size="50" placeholder="Select item from list" list="select" onchange="Select1Changed(this);"> <datalist id="select" style="display:none;"> <option value="one" location="3"/> <option value="two" location="15"/> <option value="three" location="27"/> </datalist> </body> </html>

从数据列表中的选定选项中获取自定义属性

问题描述

2 个解决方案

解决方案1
1 2020-09-18 10:19:07

解决方案2
1 已采纳 2020-09-18 10:24:37

从数据列表中的选定选项中获取自定义属性

问题描述

2 个解决方案

解决方案1 1 2020-09-18 10:19:07

解决方案2 1 已采纳 2020-09-18 10:24:37

解决方案1
1 2020-09-18 10:19:07

解决方案2
1 已采纳 2020-09-18 10:24:37