jQuery实现动态显示select下拉列表数据的方法
程序员文章站
2022-04-23 11:56:05
本文实例讲述了jquery实现动态显示select下拉列表数据的方法。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
本文实例讲述了jquery实现动态显示select下拉列表数据的方法。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jquery动态显示表单</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> //数据集 var schools = [ { 'id': 1, 'name': '南京大学' }, { 'id': 2, 'name': '北京大学' }, { 'id': 3, 'name': '浙江大学' }, { 'id': 4, 'name': '清华大学' }, { 'id': 5, 'name': '湖南大学' }, ]; //页面加载运行,将数据集绑定select,显示默认选中学校 $(function () { bindselect(); $('#info').text($('#schoolselect').val()); }); //将数据集绑定select,重新选择学校后显示选中学校 bindselect = function () { var $schoolselect = $('#schoolselect'); $schoolselect.change(function () { $('#info').text($(this).val()); }); if (schools.length > 0) { for (var i = 0; i < schools.length; i++) { var item = schools[i]; if (item.id == 2) { $schoolselect.append('<option value="' + item.id + '" selected>' + item.name + '</option>'); } else { $schoolselect.append('<option value="' + item.id + '">' + item.name + '</option>'); } } } } </script> </head> <body> <form> <select id="schoolselect"> </select> <label id="info"></label> </form> </body> </html>
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery表单(form)操作技巧总结》、《jquery常用插件及用法总结》、《jquery扩展技巧总结》、《jquery切换特效与技巧总结》、《jquery遍历算法与技巧总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇: 三国魏蜀吴三分天下,谁占据的优势最大?
下一篇: Netty入门示例
推荐阅读
-
从数据库中动态选取下拉列表的方法
-
jsp通过自定义标签库实现数据列表显示的方法
-
jquery+php实现导出datatables插件数据到excel的方法
-
layui表单验证select下拉框实现验证的方法
-
jquery实现省市select下拉框的替换(示例代码)
-
AngularJS中ng-options实现下拉列表的数据绑定方法
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
-
jQuery使用JSONP实现跨域获取数据的三种方法详解
-
Android编程实现在Activity中操作刷新另外一个Activity数据列表的方法
-
jQuery简单实现向列表动态添加新元素的方法示例