<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>二级联动</title>

            <script>

                // 创建一个二维数组

                var arr = new Array(2);

                arr[0] = ["广东","广州","深圳","佛山"];

                arr[1] = ["湖北","荆州","武汉","赤壁"];

                function choose(val){

                    // 获取city的select

                    var city = document.getElementById("city");

                    // 获取option

                    var cityOp = city.getElementsByTagName("option");

                    // 设置可操作

                    city.disabled = false;

                    // 先删除，后添加

                    for (var i = 0; i < cityOp.length; i++) {

                        var op = cityOp[i];

                        // 删除option

                        city.removeChild(op);

                        //数组长度发生变化，需处理

                        i--;

                    }

                    // 遍历

                    for (var i = 0; i < arr.length; i++) {

                        //取一维数组

                        var arr1 = arr[i];

                        //取一维数组的第一个值

                        var firstVal = arr1[0];

                        //判断

                        if(firstVal == val){

                            //遍历

                            for (var j = 1; j < arr1.length; j++) {

                                // 获取城市名

                                var value = arr1[j];

                                // 创建option

                                var optionl = document.createElement("option");

                                // 创建文本

                                var textl = document.createTextNode(value);

                                // 把文本添加到标签

                                optionl.appendChild(textl);

                                //添加到city里面

                                city.appendChild(optionl);

                            }

                        }

                    }

                }

            </script>

    </head>

    <body>

        <select id="province" onchange="choose(this.value)">

            <option value="0">--请选择省--</option>

            <option value="广东">广东</option>

            <option value="湖北">湖北</option>

        </select>

        <select id="city" disabled="disabled">

            <option value="0">--请选择市--</option>

        </select>

    </body>

</html>

html 二级联动（省市联动）的更多相关文章

  1. 练习: 省市联动(Ajax)

    // 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...

  2. JS 省市联动 ajax

    省市联动 //省市联动     $('.locationCode').change(function () {         var val = $(this).val();         if ...

  3. 省市联动_简单的Demo，适用于各种二级菜单联动

    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...

  4. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  5. js实现的省市联动

    最近工作,要用到省市联动的功能.网上搜了一下,发现有很多这样的例子,看了不少实例,把觉得写得不错的代码穿上来,好给大家分享一下. <!DOCTYPE html PUBLIC "-//W ...

  6. jQuery实现省市联动

    未实现任何功能之前: 实现功能之后: 实现该功能的jQuery核心代码: <script> var provinceArr=new Array(5); provinceArr[0]=new ...

  7. jquery省市联动，根据公司需求而写

    //author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...

  8. AJAX案例四：省市联动

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. Dynamic CRM 2013学习笔记（八）过滤查找控件 （类似省市联动）

    我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤 ...

  10. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

随机推荐

  1. snowflake

    snowflake在分布式系统中生成全局id

  2. HDU 1176 经典dp

    记录最晚时间 从time为2枚举到最晚时间 每个时间段的x轴节点都等于上一个时间段的可触及的最大馅饼数 #include<stdio.h> #include<string.h> ...

  3. twitter storm源码走读之4 -- worker进程中线程的分类及用途

    欢迎转载,转载请注明出版,徽沪一郎. 本文重点分析storm的worker进程在正常启动之后有哪些类型的线程,针对每种类型的线程,剖析其用途及消息的接收与发送流程. 概述 worker进程启动过程中最 ...

  4. FlowVisor 安装

    参考:Github-FlowVisor-wiki 第一步 添加公钥: 命令: $ wget http://updates.onlab.us/GPG-KEY-ONLAB $ sudo apt-key a ...

  5. Javascript 笔记与总结（2-2）Javascript 变量

    js 的变量名可以由 _,数字,字母,$ 组成,且 不能以数字开头.在 jQuery 中就定义了一个全局变量 $ . 声明变量用 var 变量名,如果不用 var,则会污染全局. js 变量类型包括: ...

  6. 利用SpannableString设置文本

    private void setTips(){ String big = "大字深色"; String small = "小字淡色"; Spannable ti ...

  7. CentOS 6 RPM安裝python 2.7

    先说第一种方法,通过rpmbuild编译XXX.src.rpm包([1].[2]): 安装依赖:sudo yum install -y make autoconf bzip2-devel db4-de ...

  8. UI auto test

    java.home/lib/security/java.policy (Solaris/Linux) http://www.cnblogs.com/richaaaard/p/5091059.html ...

  9. Netty 4(一) zero copy

    Netty的“零拷贝”主要体现在如下三个方面: 1) Netty的接收和发送ByteBuffer采用DIRECT BUFFERS,使用堆外直接内存进行Socket读写,不需要进行字节缓冲区的二次拷贝. ...

  10. 【Android开发学习笔记】【第二课】Activity学习

    什么是Activity,就是我们所看到的 需要理解以下四句话: 1.一个Activity就是一个类,并且这个类需要集成Activity: 2.需要重写OnCreat方法 3.每个Activity都需要 ...