<!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. 【转】在.Net中关于AOP的实现

    原文地址:http://www.uml.org.cn/net/201004213.asp 一.AOP实现初步 AOP将软件系统分为两个部分:核心关注点和横切关注点.核心关注点更多的是Domain Lo ...

  2. Ubuntu安装Flash

    第一步:打开视频网站,随意点击一个视频,会提示需要先安装Flash,点击它所提供的链接. 第二步:根据系统选择合适的版本进行下载,有红帽的yum版本,我选择的是tar.gz for other Lin ...

  3. journalctl --help

    journalctl [OPTIONS...] [MATCHES...] Query the journal. Flags:     --system              Show the sy ...

  4. 表单序列化 js

    function serliaze(form) { //序列化表单 var obj = {}; $.each(form.serializeArray(), function (index) { if ...

  5. vi 整行 多行 复制与粘贴

    vi编辑器中的整行(多行)复制与粘贴就非常必要了. 1.复制 1)单行复制 在命令模式下,将光标移动到将要复制的行处,按“yy”进行复制: 2)多行复制 在命令模式下,将光标移动到将要复制的首行处,按 ...

  6. CAS实践笔录

    下载CAS 本文下载的是cas-server-4.0.0-release 下载地址: https://www.apereo.org/cas/download 导入Eclipse测试 Import -& ...

  7. ubuntu如何开启root,如何启用Ubuntu中root帐号

    jingyan.baidu.com/article/495ba84116104238b20ede62.html ubuntu如何开启root,如何启用Ubuntu中root帐号 | 浏览:8344 | ...

  8. android获取设备全部信息

    private static final String FILE_MEMORY = "/proc/meminfo"; private static final String FIL ...

  9. HTML与CSS的关系

    1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片. ...

  10. ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案

    原文:ArcGIS API for Silverlight之配准JPG图片地图文字倾斜解决方案 根据实际JPG图片进行配准后,发布的地图,利用ArcGIS API for Silverlight在网页 ...