-1

How to get data-value in datalist? example: 

<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>
croxy
  • 4,082
  • 9
  • 28
  • 46
qkhuyit
  • 11
  • 1
  • 1
  • 3
    Possible duplicate of [On select change, get data attribute value](http://stackoverflow.com/questions/8345666/on-select-change-get-data-attribute-value) – acm Oct 24 '16 at 09:17

3 Answers3

2

This worked for me:

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 is the id for the text box txt_data_list_option is the id for data_list

Hope it helps.

amo-ej1
  • 3,279
  • 26
  • 35
Reginaldo Luciano De Araujo
  • 21
  • 2
1

This worked for me

HTML Code

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

 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;
Community
  • 1
  • 1
Aditya A.Rajan
  • 531
  • 5
  • 8
0

try this

        <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"/>
Khetesh kumawat
  • 681
  • 7
  • 15