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

时间:2019-01-12 15:32:11

标签: javascript html html-datalist

我想获取数据列表对象上选择的选项的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编写)

5 个答案:

答案 0 :(得分: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>

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

答案 1 :(得分:1)

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

.

答案 2 :(得分:0)

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

但是我认为这不是最好的解决方案,是吗?

答案 3 :(得分:0)

这是使用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>

希望这会有所帮助。

答案 4 :(得分:0)

尝试一下:

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