<!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. html5_d登陆界面_注册界面

    <!DOCTYPE html><html><head><script type="text/javascript">function ...

  2. ThinkPHP 源码分析之常量 IS_AJAX

    在控制器中判断请求是否是通过 AJAX 提交,ThinkPHP(3.2.2)中在 ThinkPHP/Library/Think/App.class.php (Line:49) 中定义了常量 IS_AJ ...

  3. MySQL 数据库设计 笔记与总结（3）物理设计

    [物理设计的工作] ① 选择合适的数据库管理系统:Oracle,SQLServe,MySQL,PgSQL ② 定义数据库.表及字段的命名规范 ③ 根据所选的 DBMS 系统选择合适的字段类型 ④ 反范 ...

  4. IOS开发之开篇--CocoaPods安装

    CocoaPods是什么?当你开发iOS应用时,会经常使用到很多第三方开源类库,比如JSONKit,AFNetWorking等等.可能某个类库又用到其他类库,所以要使用它,必须得另外下载其他类库,而其 ...

  5. 什么是blob,mysql blob大小配置介绍

    什么是blob,mysql blob大小配置介绍 作者: 字体:[增加 减小] 类型:转载   BLOB (binary large object),二进制大对象,是一个可以存储二进制文件的容器.在计 ...

  6. PL/SQL Developer 显示中文乱码问题

    简单版本: 首先,通过 select userenv('language') from dual; 查询oracle服务器端的编码,如为:AMERICAN_AMERICA.ZHS16GBK; 在我们的 ...

  7. Apache服务器安装配置

    Apache服务器安装 1.Apache服务器安装      在Linux系统下,apache服务器的安装方式比较灵活,可以使用二进制包安装,比如:rpm包.deb包.已编译好的包.也可以简单的使用y ...

  8. 耦合 Coupling the object-oriented paradigm && data coupling

    Computer Science An Overview _J. Glenn Brookshear _11th Edition 耦 两个人一起耕地 one of the benefits of the ...

  9. 2认识HTML中的“ML”：深入理解超文本

    HTML是描述网页结构的标记语言(即HTML中的'ML'),而HT指把一个网页链接到其他网页. <a>元素可以创建超文本链接到另外一个网页,<a>元素中的内容在网页中是可点击的 ...

  10. WCF中自定义消息编码器：压缩编码器的使用

    通过抓包知道WCF在提交.返回数据的时候大多使用XML进行数据交互,如果返回DataTable那么这些数据将变得很大,通过查询找到一个对数据压缩的方法: http://msdn.microsoft.c ...