如何使用javascript从datalist中的特殊属性获取数据？答案

【问题标题】：How to get data from a special attribute in datalist using javascript?如何使用javascript从datalist中的特殊属性获取数据？
【发布时间】：2021-03-11 10:07:44
【问题描述】：

我想获取“opt_id”中的数据。当我使用 selelct 标签插入 datalist 时，相同的代码也有效。

这是我的代码的样子：

var get_data = document.getElementById("select_opt");
var dataIndex = get_data.options[get_data.selectedIndex].getAttribute("opt_id");

<input id="optio_lists" list="options" placeholder="Search...">
<datalist id="select_opt">
<option opt_id="0"  label="Cricket">Cricket</option>
<option opt_id="1"  label="Football">Football</option>
<option opt_id="2"  label="Tennis">Tennis</option>
<option opt_id="3"  label="Basketball">AKITA</option>
</datalist>

【问题讨论】：

错字："select_op" 应该是"select_opt"
opt_id 不是有效属性。为此使用data-* 属性-> data-opt_id

标签： javascript html datalist html-datalist

【解决方案1】：

在document.getElementById() 的get_data 变量的脚本标记中，您拼错了id - 而不是select_opt，您写的是select_op。

【讨论】：

【解决方案2】：

数据列表只是数据的来源，不同于选择框。因此 selectedIndex 属性在这里没有意义。

查看此链接了解更多详情 - Is there a SelectedIndex for an HTML5 DataList?

【讨论】：

是的，我明白了。但是建议的一个选项并没有给我“属性（opt_id）”中的值。这在“价值”情况下工作正常。感谢您的宝贵时间！