Can HTML5 datalist differentiate value and option text?

Question

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>

Answer 1

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