javascript - 可过滤的下拉列表获取ID

我必须获取所选选项的ID。

这种方式总是返回第一个id，它返回“ 1”：

function myFunction() {
  var skills = document.getElementById('toto');
  var skillId = skills.getAttribute('data-id');
  console.log(skillId);
}

<label>
    Skills :
    <input id="inputTest" name='skill' list='skills'>
        <datalist id='skills'>
            <select>
                 <option id="toto" data-id="1">HTML</option>
                 <option id="toto" data-id="2">Jquery</option>
                 <option id="toto" data-id="3">CSS</option>
            </select>
        </datalist>
    </label>

<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>

这种方式不起作用，它返回“ null”：

<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
    <datalist id='skills'>
        <select>
         <div id="toto">
            <option data-id="1">HTML</option>
            <option data-id="2">Jquery</option>
            <option data-id="3">CSS</option>
         </div>
        </select>
    </datalist>
</label>

<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>

<script>
    function myFunction(){
    var skills = document.getElementById('toto');
    var skillId = skills.getAttribute('data-id');
    console.log(skillId);
    }
</script>

以下方式也不起作用：

...
<datalist id='skills'>
...
    <script>
        function myFunction(){
        var skills = document.getElementById('skills');
        var skillId = skills.getAttribute('data-id');
        console.log(skillId);
        }
    </script>

如果我将ID放在上，它也不会起作用。

getAttribute()方法是否不可避免地与<div></div>方法相同？

我只想了解正确的功能。

还有另一种没有数据列表的方法吗？因为“ Internet Explorer 9和更早版本或Safari不支持datalist标记”。

非常感谢 ：）

最佳答案

您可以使用filter()和map()通过匹配文本来获得选项：

function myFunction(){
  var skills = document.getElementById('inputTest');
  var allOption = [].slice.call(document.querySelectorAll('#skills option'));
  var selected = allOption.filter(o => o.textContent == skills.value).map(el => el.getAttribute('data-id'))[0];
  console.log(selected);
}

<label>
Skills :
<input id="inputTest" name='skill' list='skills'>
    <datalist id='skills'>
        <option data-id="1">HTML</option>
        <option data-id="2">Jquery</option>
        <option data-id="3">CSS</option>
    </datalist>
</label>

<button type="button" id="button1" onclick="myFunction()"> Clickhere </button>