您可以选择任何
不,datalist元素是为输入提供自动完成的。它是数据源,对用户隐藏,并且多个输入可以链接到它。所以拥有selectedIndex没有意义。
相反,你应该简单地检查输入的.value属性:
var datalist = document.getElementById ("datalist");
var input = document.getElementById ("input");
input.addEventListener ("keyup", function (event) {
if (event.which === 13) {
alert(input.value);
}
}, false);
<input list="browsers" name="browser" value="Internet Explorer">
<datalist id="browsers">
<option value="Internet Explorer" data-company="Microsoft">
<option value="Firefox" data-company="Mozilla">
<option value="Chrome" data-company="Google/Alphabet">
<option value="Opera" data-company="Opera">
<option value="Safari" data-company="Apple">
</datalist>
for (var i=0;i<datalist_id.options.length;i++) {
if (datalist_id.options[i].value == input_id.value) {
// obtains the data-company attrbute
console.log(datalist_id.options[i].getAttribute("data-company");
alert(datalist_id.options[i].innerText);
break;
}
}
for (var i=0;i<datalist_id.options.length;i++)
if (datalist_id.options[i].value == input_id.value)
{alert(datalist_id.options[i].innerText);break;}
您可以向输入元素添加一个值。这将显示为用户的“默认”值。如果用户决定更改它,即从输入字段中删除此值,则数据列表中的列表将显示出来:
<input list="browsers" name="browser" value="Internet Explorer">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Datalist
的 SelectedIndex
获取索引的脚本。来自 @pingle60 的 Html。let x = document.getElementById("browsers").options;
let input = document.querySelector('input');
input.onchange = getIndex;
function getIndex(e) {
for (var i=0;i<x.length;i++) {
if (x[i].value == e.target.value) {
return i;
// alert('The index of SellectedIndex is : ' + i + ' and the value is : ' +x[i].value);
break;
}
}
}
input
,因为这样做也可以解决Dmitry提出的问题。 - Some Guy