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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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环境搭建最新方法
2006/09/05 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
常用的js方法合集
2017/03/10 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
python和go语言的区别是什么
2020/07/20 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
自荐信格式范文
2013/10/07 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
环保项目建议书
2014/08/26 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
培训师岗位职责
2015/02/14 职场文书
获奖感言一句话
2015/07/31 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
mysql的单列多值存储实例详解
2022/04/05 MySQL
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers