<!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. windows服务器。linux服务器的集成包推荐

    我对linux不熟悉,这个有点不好意思,虽然我是做php开发的.我只是对apache+php+mysql的操作熟悉而已,但是linux的服务器配置什么的都太懂 所以我就安装了windows2008,安 ...

  2. vbaexcel

    Sub WordTest() Dim objwordApp As Word.Application Dim objword As Word.Document Dim objSeheet As Stri ...

  3. Asp.net 服务器Application,Session,Cookie,ViewState和Cache区别

    2.8 Context 的使用Context 对象包含与当前页面相关的信息,提供对整个上下文的访问,包括请求.响应.以及上文中的Session 和Application 等信息.可以使用此对象在网页之 ...

  4. 实现LoadRunner多个场景的顺序执行（命令行）

    应用场景:假设有3个不同的测试场景,分别为并发登录.核心业务.可靠性测试,3个场景有先后执行顺序.由于白天测试机器另有用处,只能在晚上进行性能测试,这时我们的期望是能否把测试场景都设定好之后晚上自动运 ...

  5. hiho47 : 拓扑排序·一

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 由于今天上课的老师讲的特别无聊,小Hi和小Ho偷偷地聊了起来. 小Ho:小Hi,你这学期有选什么课么? 小Hi:挺多的,比 ...

  6. pdo封装类

    <?php //http://www.imavex.com/php-pdo-wrapper-class/ class db extends PDO { private $error; priva ...

  7. Xcode Shortcuts

    Description:⌘: Command     ⌥: Option     ⌃: Control    ←↑↓→: Left, Up, Down, Right                  ...

  8. php-- memcache 与 memcached支架的区别与共同点 个人整理

    首先声明:memcache 与 memcached 之间没有关系 1.概念相似 MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载. m ...

  9. Java 进程（转）

    转自http://jiangshuiy.iteye.com/blog/1674235 PS:今天做android助手项目的时候,发现adb push命令执行会卡死,最后发现不能用waitfor阻塞等待 ...

  10. 1046 A^B Mod C

    1046 A^B Mod C 基准时间限制:1 秒 空间限制:131072 KB 给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整 ...