jQuery实现动态显示select下拉列表数据的方法


Posted in jQuery onFebruary 05, 2018

本文实例讲述了jQuery实现动态显示select下拉列表数据的方法。分享给大家供大家参考,具体如下:

先来看看运行效果:

jQuery实现动态显示select下拉列表数据的方法

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>3water.com 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 相关文章推荐
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery Dom元素操作技巧
Feb 04 #jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 #jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
jquery.picsign图片标注组件实例详解
Feb 02 #jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
You might like
php之curl实现http与https请求的方法
2014/10/21 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
浅谈python中set使用
2016/06/30 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
pycharm 安装JPype的教程
2019/08/08 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers