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. 开源组件ExcelReport 1.5.2 使用手册

    ExcelReport是一款基于NPOI开发的报表引擎组件.它基于关注点分离的理念,将数据与样式.格式分离.让模板承载样式.格式等NPOI不怎么擅长且实现繁琐的信息,结合NPOI对数据的处理的优点将E ...

  2. -[__NSCFDictionary setObject:forKey:]: mutating method sent to immutable object&#39; 解决方法

    -[__NSCFDictionary setObject:forKey:]: mutating method sent to immutable object' 解决方法: 错误:NSMutableD ...

  3. 【leetcode❤python】 400. Nth Digit

    #-*- coding: UTF-8 -*- class Solution(object):    def findNthDigit(self, n):        ""&quo ...

  4. 【phantomjs】使用phantomjs生成highChart的图片(待完善)

    阅读目录 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan' ...

  5. UVaLive 6809 Spokes Wheel (模拟)

    题意:给定两个16进制数,问你把它转成二进制后,把第一个向左或者向右旋转最少的次数同,使得第一个变成第二个. 析:也是比较水的,按照要求做就好,注意0的情况,可能会忘记. #pragma commen ...

  6. .NET Framework个版本说明

    .NET Framework .NET版本 1.0 1.1 2.0 3.0 3.5 4.0 4.5 完整版本 1.0.3705.0 1.1.4322.573 2.0.50727.42 3.0.4506 ...

  7. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  8. WPF常用转换

    原文 WPF常用转换 以下是代码中常常用到的一些转换,整理如下,后续再不断完善: 1.string和Color的转换 //string转Color (Color)ColorConverter.Conv ...

  9. SOCKET网络编程细节问题3

    SOCKET网络编程快速上手(二)——细节问题(3) 3.SIGPIPE问题 人怕牺牲,我们写的程序也一样,人有死不瞑目,程序又何尝不是?程序跑着跑着,突然就崩掉了.好一点的牺牲前告诉你些打印,差点的 ...

  10. 敏捷开发(八)- Scrum Sprint计划会议1

    本文主要是为了检测你对SCRUM Sprint 计划会议的了解和使用程度, 通过本文你可以检测一下     1.你们的SCRUM Sprint 计划会议的过程和步骤    2.会议的输出结果    S ...