<!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. Bootstrap页面布局14 - BS按钮群组

    首先看看这个代码: <div class='btn-group'> <button type='button' class='btn'>计算机</button> & ...

  2. smoke

    1.Have a smoke? 2.Would you like a cigarette? 3.Cigarettes? 4.Let's go have a smoke. 5.Do  you smoke ...

  3. Supesite 参数说明

    supesite有人看到的是强大的功能,我看到的是坑爷的一些用法,第一次看到block,我晕了.对于参数一头雾水,下面收集了一些,备用吧. supesite标签调用参数详解 参数: blocktype ...

  4. ThinkPad告别蓝快，自己使用VHD安 WIN8.1并成功激活

    写在前面:本文WIN8.1激活适合于中国大陆地区国行预装WIN8系统(bios写入WIN8授权)是可激活的,享受正版WIN8系统(同样可以安装WIN8.1系统).比如联想的Y400.Y500.Y480 ...

  5. MySql解决插入中文乱码问题

    在dos中登陆mysql 后输入: // 查看数据使用的所有编码show variables like 'character%';// 修改客户端的编码 为 gbkset character_set_ ...

  6. 500Internal Server Error

    在今晚测试wamp的项目时,当我导入一个项目到www目录下时出现如下错误:Internal Server ErrorThe server encountered an internal error o ...

  7. Div自适应高度的方法

    http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...

  8. 注册、启动、停止windows服务

    找到本机InstallUtil.exe命令 命令行下注册服务InstallUtil.exe D:\XXXXService.exe 启动服务 net start XXXXService 停止服务net ...

  9. ubuntu 14 安装 JDK

    $ sudo mkdir /usr/lib/java $ sudo tar zxvf jdk-7u21-linux-i586.tar.gz -C /usr/lib/java $ cd /usr/lib ...

  10. 【android学习1】：安装MySQL启动服务失败解决方法

    最近需要用到MySQL,从官网上下载了一个安装文件,但是安装时一直弹出如下提示信息: Configuration of MySQL Server 5.7 is taking longer than e ...