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

代码如下:

jquery部分:

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

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

jQuery写省级联动列表,创造二维数组,以及如何存/调用二维数组中的数据的更多相关文章

  1. SQL Server 2005中的分区表(二):如何添加、查询、修改分区表中的数据(转)

    在创建完分区表后,可以向分区表中直接插入数据,而不用去管它这些数据放在哪个物理上的数据表中.接上篇文章,我们在创建好的分区表中插入几条数据 insert Sale ([Name],[SaleTime] ...

  2. 【分享】纯js的n级联动列表框 —— 基于jQuery,支持下拉列表框和列表框,最重要的是n级,当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  3. 纯js的N级联动列表框 —— 基于jQuery

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  4. jquery写的树状列表插件-alvintree

    在做项目的时候遇到选择部门下人员的功能,可多选可单选,所以就想着使用树状列表来进行选择,但在网上找了很多,发现要么就是挺复杂,要么就是需要各种前端框架的支持,试了一个感觉难用,所以就想着自己写一个简便 ...

  5. [ PHP+jQuery ] ajax 多级联动菜单的应用:电商网站的用户地址选择功能 ( 二 ) - 仿亚马逊下拉面板

    /** jQuery version: 1.8.3 Author: 小dee Date: 2014.11.8 */ 接上一篇博客. 实现带缓存的仿亚马逊下拉面板 效果图: 图1 初始 图2 点击省份 ...

  6. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  7. 用jquery写循环播放div的相关笔记 珍贵的总结 -1

    用jquery写循环播放div line-height应用的元素的 层次? line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行 ...

  8. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  9. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

随机推荐

  1. jQuery validator自定义

    项目中接触到validator,记录下 jQuery.validator.addMethod("isStrongPwd", function(value, element){ va ...

  2. table中的th td margin不生效

    margin-top,margin-left,margin-right,margin-bottom 是body中的属性th,td 是表格的元素与之对应的是padding-top,padding-lef ...

  3. BZOJ 1040 树形DP+环套树

    就是有n个点n条边,那么有且只有一个环那么用Dfs把在环上的两个点找到.然后拆开,从这条个点分别作树形Dp即可. #include <cstdio> #include <cstrin ...

  4. PowerDesigner连接MySQL,建立逆向工程图解

    传说中,程序员们喜欢用powerDesign进行数据库建模.通常都是先设计出物理模型图,在转换出数据库需要的SQL语句,从而生成数据库.但,江湖中流传着"powerDesign逆向工程&qu ...

  5. Android的startActivityForResult()与onActivityResult()与setResult()参数分析,activity带参数的返回

    一.使用场景 在一个主界面(主Activity)通过意图跳转至多个不同子Activity上去,当子模块的代码执行完毕后再次返回主页面,将子activity中得到的数据显示在主界面/完成的数据交给主Ac ...

  6. Hadoop与Spark比较

    先看这篇文章:http://www.huochai.mobi/p/d/3967708/?share_tid=86bc0ba46c64&fmid=0 直接比较Hadoop和Spark有难度,因为 ...

  7. Map-Reduce的工作机制

    Mapper “Map-Reduce”的思想就是“分而治之” Mapper负责“分”,即把复杂的任务分解为若干个“简单的任务”而执行 “简单的任务”有几个意思:1.数据或计算规模相对于原任务要大大缩小 ...

  8. weiapi2.2 HelpPage自动生成接口说明文档和接口测试功能

    在开发Webapi项目时每写完一个方法时,是不是需要添加相应的功能说明和测试案例呢?为了更简单方便的写说明接口文档和接口测试HelpPage提供了一个方便的途径. 她的大致原理是:在编译时会生成.dl ...

  9. 迁移数据库数据到SQL Server 2017

      概述 本篇我们将利用DMA一步一步实现SQL Server 的迁移.帮助大家理解现在的SQL Server与新版本的融合问题,同时需要我们做哪些操作来实现新版本的升级或者迁移. SQL Serve ...

  10. linux的脚本应用for循环答应变量

    #!/bin/bash for var in A B C ; do echo "var is $var" done