使用 data-value 获取 datalist 对象的选定选项的 id

Question

我想获取数据列表对象上的选择选项的 ID（数据值）。

我尝试使用 Javascript 函数获取 ID 并使用this.dataset.value但我得到的结果未定义

 function getIdOfDatalist(divid){ console.log(document.getElementById(divid).dataset.value); }

 <datalist id="options"> <option value="myoption one" data-value="1"> <option value="myoption two" data-value="2"> <option value="myoption three" data-value="3"> </datalist> <input list="options" id="myoptions"> <button onclick="getIdOfDatalist('myoptions');">check</button>

我的错误是什么？ （代码是简单的减少，JS 是头部<script> ）

Answer 1

如果您稍微更改 HTML，您可以使用一种方法来避免自己循环项目。 例如：

 function getIdOfDatalist(listid){ var listObj = document.getElementById(listid); var datalist = document.getElementById(listObj.getAttribute("list")); console.log(datalist.options.namedItem(listObj.value)); }

 <datalist id="options"> <option value="myoption one" name="myoption one" data-value="1"> <option value="myoption two" name="myoption two" data-value="2"> <option value="myoption three" name="myoption three" data-value="3"> </datalist> <input list="options" id="myoptions"> <button onclick="getIdOfDatalist('myoptions');">check</button>

请注意，我向数据列表中的每个项目添加了“名称”属性。

Answer 2

这是一个简单的 JQuery 解决方案。

由于 JQuery 内置了名为data()方法，因此很容易获取data-value. 在 javascript 中，您可以使用称为dataset.value东西，但这有浏览器兼容性问题，除此之外，您可以使用getAttribute() 。

 $(document).ready(function() { $('button').click(function() { var value = $('input').val(); alert($('#options [value="' + value + '"]').data('value')); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <datalist id="options"> <option value="myoption one" data-value="1"> <option value="myoption two" data-value="2"> <option value="myoption three" data-value="3"> </datalist> <input list="options" id="myoptions"> <button>check</button>

希望这可以帮助。

Answer 3

使用 querySelector 和输入值，输入有一个列表属性，可让您直接访问 datalist 元素

function getIdOfDatalist(divid){
  let value = divid.list.querySelector(`[value="${divid.value}"`).dataset.value;
}

Answer 4

也许我只有一个解决方案：使用 for 循环检查输入和数据列表：

function getIdOfDatalist(datalist_id,input_id){

    var datalist = document.getElementById(datalist_id);
    var input    = document.getElementById(input_id);

    for (var i=0;i<datalist.options.length;i++) {
        if (datalist.options[i].value == input.value) {
            // obtains the data-company attribute
            console.log(datalist.options[i].getAttribute("data-value"));
            break;
        }
    }
}

但这在我看来不是最好的解决方案，是吗？

Answer 5

尝试这个：

 function getIdOfDatalist() { var element_input = document.getElementById('myoptions'); var element_datalist = document.getElementById('dl_options'); var opSelected = element_datalist.querySelector(`[value="${element_input.value}"]`); var id = opSelected.getAttribute('data-value'); //id hold the selected datalist id }

 <datalist id="dl_options"> <option value="myoption one" data-value="1"> <option value="myoption two" data-value="2"> <option value="myoption three" data-value="3"> </datalist> <input list="dl_options" id="myoptions"> <button onclick="getIdOfDatalist();">check</button>