• jQuery写省级联动列表,创造二维数组,以及如何存/调用二维数组中的数据


    jQuery写省级联动列表,创造二维数组来存放数据,然后通过each来遍历调用,通过creatTxtNode创建文本节点,通过createElement创建标签option,在通过append将文本写入option,再通过appendTo将文本追加到id为city的市级列表中

    代码如下:

    jquery部分:

     1 <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
     2         <script type="text/javascript">
     3             $(function(){
     4 //                创造二维数组
     5                 var city=new Array(3);
     6                 city[0]=new Array("1","2","3");
     7                 city[1]=new Array("4","5","6");
     8                 city[2]=new Array("7","8","9");
     9                 city[3]=new Array("44","55","66");
    10 //                通过id以及给需要改变的select赋值
    11                 $("#pro").change(function(){
    12 //                每没执行一次,清空一次,否则会重复出现
    13                     $("#city").empty;
    14 //                    把当前得到的值赋值给变量val
    15                     var val=this.value;
    16 //                    jQuery写循环遍历
    17                     $.each(city,function(i,j){
    18 //                        如果当前值跟遍历的值为一样的,则再进行下一步操作,伪类证明这个循环有意义
    19                         if(val==i){
    20 //                            再次遍历拿到二维数组中的值
    21                             $.each(city[i],function(m,n){
    22 //                                创造一个文本节点,来存放文本
    23                                 var txt=document.createTextNode(n);
    24 //                                创造option标签,并声明变量来接收
    25                                 var op=document.createElement("option");
    26 //                                将文本写入到标签option中
    27                                 $(op).append(txt);
    28 //                                将option标签追加到id为city的select中
    29                                 $(op).appendTo("#city");
    30                             });
    31                         }
    32                     });
    33                 });
    34             });
    35         </script>

    中间内容:

    <!--写一个省级的列表-->
            <select name="pro" id="pro">
                <option value="0">湖北</option>
                <option value="1">湖南</option>
                <option value="2">河北</option>
                <option value="3">河南</option>
            </select>
            <!--写一个空的列表来存放市级城市-->
            <select name="city" id="city">
            </select>

    样式没有设置,大家可以自己按照喜欢的设置哦!

  • 相关阅读:
    软件开发模版与规范 & 项目组规范
    CSS代码结构初探
    DIV+CSS 一行两列布局
    AE 9.3代码 升级到AE10.0
    栅格相减 异常
    鹰眼视图异常
    十进制度批量转换度分秒
    javascript是一朵奇葩
    pku 1065 pku 1548
    hdu 1254 推箱子
  • 原文地址:https://www.cnblogs.com/yanpingping/p/10486738.html
Copyright © 2020-2023  润新知