HTML5 datalist可以区分值和选项文本吗？

Question

HTML5表单的list属性/ datalist元素显示了一个选项的下拉菜单,可以从中选择,编辑甚至键入某些文本.所有这些都可以通过干净而强大的代码立即实现:

<input list="states">
<datalist id="states">
    <option value="One">
    <option value="Two">
</datalist>

但是,如何使这样的表格发送一个与选项文本不同的值,如通常的选择/选项(下面)？

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Answer 1

如果不使用一些 JS+CSS 帮助，您似乎无法使用纯 HTML。

试试这个我希望它对你有帮助。

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>

脚本

function GetValue() {
            var x = $('#datalisttestinput').val();
            var z = $('#stuff');
            var val = $(z).find('option[value="' + x + '"]');
            var endval = val.attr('id');
            alert(endval);
        }

最好的祝福库马尔