首页 > web前端 > js教程 > 正文

jQuery动态显示select下拉列表数据

php中世界最好的语言
发布: 2018-03-14 17:56:39
原创
2177 人浏览过

这次给大家带来jQuery动态显示select下拉列表数据,jQuery动态显示select下拉列表数据的注意事项有哪些,下面就是实战案例,一起来看一下。

先来看看运行效果:

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery动态显示表单</title>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    //数据集
    var schools = [
      { &#39;id&#39;: 1, &#39;name&#39;: &#39;南京大学&#39; },
      { &#39;id&#39;: 2, &#39;name&#39;: &#39;北京大学&#39; },
      { &#39;id&#39;: 3, &#39;name&#39;: &#39;浙江大学&#39; },
      { &#39;id&#39;: 4, &#39;name&#39;: &#39;清华大学&#39; },
      { &#39;id&#39;: 5, &#39;name&#39;: &#39;湖南大学&#39; },
    ];
    //页面加载运行,将数据集绑定select,显示默认选中学校
    $(function () {
      bindSelect();
      $(&#39;#info&#39;).text($(&#39;#schoolSelect&#39;).val());
    });
    //将数据集绑定select,重新选择学校后显示选中学校
    bindSelect = function () {
      var $schoolSelect = $(&#39;#schoolSelect&#39;);
      $schoolSelect.change(function () {
        $(&#39;#info&#39;).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(&#39;<option value="&#39; + item.id + &#39;" selected>&#39; + item.name + &#39;</option>&#39;);
          } else {
            $schoolSelect.append(&#39;<option value="&#39; + item.id + &#39;">&#39; + item.name + &#39;</option>&#39;);
          }
        }
      }
    }
  </script>
</head>
<body>
  <form>
    <select id="schoolSelect">
    </select>
    <label id="info"></label>
  </form>
</body>
</html>
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

全屏滚动插件fullpage.js的使用详解

怎样防止相同的事件重复的触发

如何实现滚动条滑到底部时自动加载更多内容

以上是jQuery动态显示select下拉列表数据的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板