六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

jquery动态绑定html5 datalist

Admin | 2016-5-3 5:23:52 | ReadNums | 1766 | 标签 网页制作 | 打印本页
     

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

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

datalist动态绑定图

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

  一、HTML控件

  只需要两个控件即可。

  <datalist id="AreaList"></datalist>  
  <input id="txtTest" type="text" list="AreaList" />

  二、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>


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日