Is there a SelectedIndex for an HTML5 DataList?

后端 未结 5 1737
情深已故
情深已故 2021-02-20 03:21

You can pick the current option of any select element:

mySelect.options[mySelect.selectedIndex]

Can I do the same wit

相关标签:
5条回答
  • 2021-02-20 04:01

    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:

    <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>
    
    0 讨论(0)
  • 2021-02-20 04:12

    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.

    0 讨论(0)
  • 2021-02-20 04:21
    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;}
    
    0 讨论(0)
  • 2021-02-20 04:24

    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.

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

    var datalist = document.getElementById ("datalist");
    var input = document.getElementById ("input");
    
    input.addEventListener ("keyup", function (event) {
        if (event.which === 13) {
            alert(input.value);
        }
    }, false);
    
    0 讨论(0)
  • 2021-02-20 04:25

    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,

    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;
        }
    }
    
    0 讨论(0)
提交回复
热议问题