Question

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

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

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

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

我的错误是什么？（简化的代码编写，<script>开头的JS编写）

Answer 1

如果稍微更改html，则可以使用一种方法来避免自己循环生成这些项目。例如：

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

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

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

Answer 2

具有querySelector和输入值，输入具有一个list属性，可让您直接访问datalist元素

Answer 3

也许我只有一个解决方案：使用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 4

这是使用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'));
    });  
});

HTML

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

尝试一下：

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

<script>

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
}
</script>

通过使用数据值获取数据列表对象的所选选项的ID

5 个答案: