Can HTML5 datalist differentiate value and option text?
html, html-datalist, select
Solution
Seems you can't with pure HTML without using some JS+CSS help.
try this i hope its help you.
html
<input id="datalisttestinput" list="stuff" ></input>
<datalist id="stuff">
<option id="3" value="Collin" >
<option id="5" value="Carl">
<option id="1" value="Amy" >
<option id="2" value="Kristal">
</datalist>
script
function GetValue() {
var x = $('#datalisttestinput').val();
var z = $('#stuff');
var val = $(z).find('option[value="' + x + '"]');
var endval = val.attr('id');
alert(endval);
}
Best Wishes Kumar
Problem
The list attribute / datalist element of HTML5 forms shows a dropdown menu of choices one can pick from, edit, and even type in some text. All this can be achieved at once with a clean and powerful code: ``` <input list="states"> <datalist id="states"> <option value="One"> <option value="Two"> </datalist> ``` However, how to make such a form send a value which is different from the option text, as in the usual select / option (below)? ``` <select> <option value="1">One</option> <option value="2">Two</option> </select> ```