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

最新推荐文章于 2021-06-03 17:24:59 发布

转载最新推荐文章于 2021-06-03 17:24:59 发布 · 4.4k 阅读

java 专栏收录该内容

176 篇文章

订阅专栏

本文介绍了一个使用jQuery实现动态显示select下拉列表数据的示例。通过预定义的数据集，该示例展示了如何绑定数据到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>