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

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

javascript html

Javascript 从数据列表中的选定选项获取自定义属性,javascript,html,Javascript,Html,当我从数据列表中选择一个选项时，我想获取它的自定义属性“location”并打印它。我知道select已经选择了dex，但是如何使用datalist来实现这一点呢 <!DOCTYPE html> <html> <body> <input type="text" id="StartingAddressField" size="50" placeholder="Select item f

当我从数据列表中选择一个选项时，我想获取它的自定义属性“location”并打印它。我知道select已经选择了dex，但是如何使用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>

constdatalist=document.getElementById（'select'）；
const textInput=document.getElementById（'StartingAddressField'）；
const getSelecteOptionLocation=（）=>{
for（设i=0；i{
const selectedOption=getselectedoptionlocation（）；
如果（selectedOption==未定义）{
log（“数据列表中不包括选项”）；
}否则{
log（selectedOption.getAttribute（'location'）；
}
});
通过使用document.getElementById
选择元素，您将获得HTMLCollection
，您可以迭代（在您的案例中是选项列表），并使用附加到每个元素的属性对象查找所需的属性
此外，我还发现，一旦选择了值，datalist就不可用，如果需要的话，那么好吧，否则您可以查看该bug

功能选择1已更改（元素）{
let location='请选择一个有效选项'；
设dt=document.getElementById（'select'）；
//dt包含选项的HTMLCollection，因此使用for循环对其进行迭代，使用childElementCount获取if循环的长度
for（设i=0；i


您可以使用元素.getAttribute（）
（）：文档.getElementById（'select'）.children[index].getAttribute（'location'）
。这将返回元素的属性，但如何知道我从数据列表中选择了哪个选项？函数“Select1Changed（）”是什么是吗？您必须循环遍历datalist选项，并找到其值等于输入中值的选项。为了清楚起见，我将添加一个带有代码片段的答案。此解决方案和sandeep joshi都可以工作，但如果我按enter键输入一个不在输入中的值，则会显示错误。我是否应该再问一个问题，这个案件需要如何处理？因为我现在明白了，我也需要在按下“enter”键时检测输入文本是否发生了变化。@MichaelEffraimidis，您可以用一个简单的条件语句来处理这个问题。我更新了代码片段以处理该场景；