Jquery动态绑定html5 datalist数据

来源：互联网发布：织梦cmspath 编辑：程序博客网时间：2024/04/28 22:34

<!DOCTYPE HTML><html><head>    <meta charset="UTF-8">    <title>表单验证</title>    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>    <script type="text/javascript">        //数据集        var schools = [            { 'label': '江苏', 'value': '南京大学' },            { 'label': '北京', 'value': '北京大学' },            { 'label': '北京', 'value': '清华大学' },            { 'label': '浙江', 'value': '浙江大学' },            { 'label': '上海', 'value': '同济大学' },        ];        $(function () {            if (schools.length > 0) {                for (var i = 0; i < schools.length; i++) {                    var item=schools[i];                    $('#schoolList')                        .append('<option label="' + item.label + '" value="' + item.value + '"></option>');                }            }            $('#btnTest').click(function () {                alert($('#txtTest').val());            });        });    </script></head><body>    <form>        <datalist id="schoolList"></datalist>        <input id="txtTest" type="text" list="schoolList" />        <input id="btnTest" type="button" value="test" />    </form></body></html>

0 0