Jquery动态绑定html5 datalist数据

最新推荐文章于 2023-06-06 14:56:24 发布

曹振华

最新推荐文章于 2023-06-06 14:56:24 发布

阅读量9.8k

点赞数

分类专栏： html5 文章标签： jquery html5 datalist

本文链接：https://blog.csdn.net/chadcao/article/details/39642085

版权

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery动态绑定html5 datalist数据

表单验证 //数据集 var schools = [ { 'label': '江苏', 'value': '南京大学' }, { 'label': '北京', 'value': '北京大学' }, { 'label': '北京', 'value': '清华大学' },
复制链接

扫一扫

专栏目录