是否有HTML5 DataList的SelectedIndex ?

You can pick the current option of any select element:

您可以选择任何选择元素的当前选项:

mySelect.options[mySelect.selectedIndex]

Can I do the same with a DataList? Something like this:

我可以用DataList做同样的事情吗?是这样的:

<input id = "input" list = "datalist" type = "text" />

<datalist id = "datalist">
    <option value = "No. 1"></option>
    <option value = "No. 2"></option>
    <option value = "No. 3"></option>
</datalist>

<script>
    var datalist = document.getElementById ("datalist");
    var input = document.getElementById ("input");

    input.addEventListener ("keyup", function (event) {
        if (event.which === 13) {
            alert (datalist.options[datalist.selectedIndex]); // Example
        }
    }, false);
</script>

5 个解决方案

#1

No, the datalist element is for providing autocomplete to inputs. It is a source of data, is hidden from the user, and multiple inputs may link to it. Therefore it doesn't make sense to have a selectedIndex.

不，datalist元素是为输入提供自动完成。它是一个数据源，对用户是隐藏的，多个输入可以链接到它。因此，拥有selectedIndex是没有意义的。

Instead, you should simply check the .value of the input:

相反，您应该检查输入的.value:

var datalist = document.getElementById ("datalist");
var input = document.getElementById ("input");

input.addEventListener ("keyup", function (event) {
    if (event.which === 13) {
        alert(input.value);
    }
}, false);

#2

Judging by specs, datalist object doesn't have selectedIndex property. But you can find it's default option, which have selected. Or compare input's value to each option value and manually find the index.

从spec判断，datalist对象没有selectedIndex属性。但是你可以找到它的默认选项，它已经被选中。或者将输入值与每个选项值进行比较，然后手工查找索引。

#3

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;}

#4

You can just add a value to the input element. This will be shown to the user as the "default" value. If the user decides to change it, i.e. delete this value from the input field, then the list in the datalist will show up:

您只需向输入元素添加一个值。这将显示给用户作为“默认”值。如果用户决定更改，即从输入字段中删除该值，则datalist中的列表将显示:

<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>

#5

Lets say you have data attributes in the above example like this,

假设在上面的例子中有数据属性，

<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>

and you want to obtain the data-company attribute of the selected item,

您想要获取所选项目的data-company属性，

using the loop above

使用上面的循环

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;
    }
}

#1