如何获取数据列表中的数据值答案

【问题标题】：How to get data-value in data list如何获取数据列表中的数据值
【发布时间】：2019-08-30 19:17:42
【问题描述】：

如何获取数据列表中的数据值？示例：

<datalist id="browsers">
   <option value="Internet Explorer" data-value="1">
   <option value="Firefox" data-value="2">
   <option value="Chrome" data-value="3">
   <option value="Opera" data-value="4">`enter code here`
   <option value="Safari" data-value="5">
</datalist>

【问题讨论】：

On select change, get data attribute value的可能重复

标签： html

【解决方案1】：

这对我有用：

function getDataListSelectedOption(txt_input, data_list_options) 
{
var shownVal = document.getElementById(txt_input).value;
var value2send = document.querySelector("#" + data_list_options + " option[value='" + shownVal + "']").dataset.value;
            return value2send;
}

txt_input 是文本框的 id txt_data_list_option 是 data_list 的 id

希望对你有帮助。

【讨论】：

【解决方案2】：

试试这个

        <datalist  id="browsers">
    <option value="Internet Explorer" data-value="1">
    <option value="Firefox" data-value="2">
    <option value="Chrome" data-value="3">
    <option value="Opera" data-value="4">`enter code here`
    <option value="Safari" data-value="5">
</datalist>

<input type="text" name="located" list="browsers"/>

【讨论】：

【解决方案3】：

这对我有用

HTML 代码

 <input list="newBrwosers" id="newBrwoser" name="newBrwoser" class="form-control">
<datalist  id="newBrwosers">
<option value="Internet Explorer" data-value="1" data-id="1">
<option value="Firefox" data-value="2" data-id="2">
<option value="Chrome" data-value="3" data-id="3">
<option value="Opera" data-value="4" data-id="4">`enter code here`
<option value="Safari" data-value="5" data-id="5">
</datalist>

JS代码

 var newBrwoser= document.getElementById("newBrwoser").value;
 var newBrwoser_val= document.querySelector("#newBrwosers"  + " option[value='" + newBrwoser+ "']").dataset.value;
 var newBrwosers_id= document.querySelector("#newBrwosers"  + " option[value='" + newBrwoser+ "']").dataset.id;

【讨论】：