jquery动态绑定html5 datalist

Admin | 2016-5-3 5:23:52 | 被阅次数 | 4937

温馨提示!

如果未能解决您的问题，请点击搜索；登陆可复制文章，点击登陆

　　首先要给大家说明的是，datalist控件是HTML5客户端的控件，而不是服务器端的控件。

　　下面，我们要实现的功能是，通过JS代码，动态给datalist赋值，让datalist实现输入框输入自动弹出选项的效果。

datalist动态绑定图

　　请看上面的图示，就是效果图了。下面我们代码吧。

　　一、HTML控件

　　只需要两个控件即可。

　　二、JS代码如下

　　<script type="text/javascript">
            //数据集
            //var Areas = [{ 'label': 'yn', 'value': '云南' },{ 'label': 'bj', 'value': '北京' },{ 'label': 'tj', 'value': '天津' },{ 'label': 'zj', 'value': '浙江' },{ 'label': 'sh', 'value': '上海' }];
            var Areas = ['云南','北京','天津','浙江', '上海'];
            $(function () {
                if (Areas.length > 0)
                {
                    for (var i = 0; i < Areas.length; i++)
                   {
                        var item=Areas[i];
                        //$('#AreaList').append("<option value='" + item.value +"'></option>");
                        $('#AreaList').append("<option value='" + item +"'></option>");
                    }
                }
            });
        </script>